探索浏览器下载到指定本地目录的情况

最编程 2024-06-26 21:58:25

...

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

下载

通常的两种下载方式是

后端给定文件服务器的地址，通过a标签进行下载，

<a href="xxxx" download="tupian.png">点击下载</a>

如果想对文件名进行修改的话，只需要在a标签上添加download属性，指定文件名称；

但是，请注意

a标签download属性只支持谷歌和火狐浏览器，不支持IE（IE不支持html5 新特性a标签download属性）。

同时访问的域名与a标签内href的域名需要一致，如果跨域的话，文件名称就不支持修改了，

这里我推荐一个js库，支持修改文件名称 file-save

后端传回blob文件流，前端解析后，通过a标签进行下载，

这里需要注意的是，请求头中必须声明responseType 为 blob 类型

if (navigator.appVersion.toString().indexOf('.NET') > 0) {

  window.navigator.msSaveBlob(blob, fileName);

} else {

  const href = window.URL.createObjectURL(blob); // 创建下载的链接

  downloadElement.href = href;

  downloadElement.download = 'fileName; // 下载后文件名

  document.body.appendChild(downloadElement);

  downloadElement.click(); // 点击下载

  document.body.removeChild(downloadElement); //  下载完成移除元素

  window.URL.revokeObjectURL(href); // 释放掉blob对象

}

以上两种下载方式，文件要么下载时询问下载路径，要么就是浏览器的指定目录

但是，如果要求用户自定义目录呢

这里用到了新的api showSaveFilePicker

showSaveFilePicker

兼容性

老规矩，上兼容性

很明显，由于涉及到读写文件，就会涉及到安全方面的问题，所以，兼容性不高，即使是chrome浏览器，也只是在86版本后才开始兼容，

这个api也是google倡导的，这里大家需要注意的是，因为 Google 的产品策略一向是说关就关，所以大家要留心常看文档，别学了一半 API 没了，

例子

const BtnSaveAs = document.getElementById('btn-save-as')
async function fileSaveAs(description) {
  const options = {
    types: [{
      description,
      accept: {
        'text/plain': ['.txt'],
      },
    }, ],
  };
  return await window.showSaveFilePicker(options);
}
BtnSaveAs.addEventListener('click', async () => {
  const handle = await fileSaveAs("Hello File Access Api")
})

使用MDN的例子，点击之后，可以选择路径存放文件，但是此时，文件是没有任何数据的，所以我们需要去写入数据

写入数据

async function writeFile(fileHandle, contents) {

  // createWritable()创建一个可写流对象WritableStream

  const writable = await fileHandle.createWritable();

  // 通过管道将数据传输到文件

  await writable.write(contents);

  // 管道使用完毕后需要关闭

  await writable.close();

 }

BtnSaveAs.addEventListener('click',async ()=>{

  const handle = await fileSaveAs("Hello File Access Api")

  await writeFile(handle, data)

})

参数

包含选项的可选对象，如下所示：

excludeAcceptAllOption： Boolean 默认 false。默认情况下，选择器应包含一个选项以不应用任何文件类型过滤器（由下面的类型选项发起）。将此选项设置为true意味着该选项_不可_用。

suggestedName： String 建议的文件名。

startIn： String 可选值

- desktop: 桌面

- documents: 文档

- downloads: 下载

- music: 音乐

- pictures: 图像

- videos: 视频

types：Array 允许保存的文件类型。每个项目都是具有以下选项的对象

- description：允许的文件类型类别的可选描述。

- accept:Object键设置为MIME 类型，值设置Array为文件扩展名（参见下面的示例）。

在vue的使用

write()方法负责写入数据，可以是字符串，Blob对象，也可以是流。

下面例子中返回的是文件流

async mutilDownload() {
  const params = {};
  const res = await mutilDownload(params);
  const handle = await this.fileSaveAs("Hello File Access Api")
  await this.writeFile(handle, res.data)
},

参考：

juejin.cn/post/699127…

developer.mozilla.org/en-US/docs/…

上一篇：文件下载，了解这 9 种情况就够了

下一篇： java 从服务器下载文件并保存到本地示例

探索浏览器下载到指定本地目录的情况

下载

showSaveFilePicker

兼容性

例子

写入数据

参数

在vue的使用

推荐库

参考：

探索浏览器下载到指定本地目录的情况