JS实现Blob文件流下载_js下载blob

一、下载

在 JavaScript 中，可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法来实现文件流下载。
下面是一个示例代码，可以帮助了解如何在 JavaScript 中实现文件流下载：

function downloadFile(data, filename, type) {
    // 创建 Blob 对象
    const blob = new Blob([data], { type: type });

    // 判断当前浏览器是否是IE，由于IE是没有download 方法的，需要用msSaveBlob() 或 msSaveOrOpenBlob()
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // 兼容IE
        window.navigator.msSaveOrOpenBlob(blob, filename)
    } else {
        // 创建 URL 对象
        const url = URL.createObjectURL(blob);

        // 创建链接
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;

        // 模拟点击链接进行下载
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 释放 URL 对象
        URL.revokeObjectURL(url);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这个示例中，我们定义了一个 downloadFile() 函数，这个函数接受三个参数：data、filename 和 type。其中，data 表示要下载的数据流，filename 表示要保存的文件名，type 表示要下载的文件类型。

在函数中，我们首先使用 Blob 对象创建一个二进制数据流，然后使用 URL.createObjectURL() 方法创建一个 URL 对象。接着，我们创建一个链接元素，并将这个链接元素的 href 属性设置为 URL 对象的 URL，将 download 属性设置为要保存的文件名。最后，我们模拟点击链接元素，启动下载操作。

当下载完成后，我们需要释放 URL 对象，以便浏览器可以回收这个对象的内存。这个操作可以使用 URL.revokeObjectURL()方法来实现。

注意：IE中要使用window.navigator.msSaveOrOpenBlob 或 window.navigator.msSaveBlob来处理Blob对象
用法：

1.msSaveOrOpenBlob：提供保存和打开按钮
2.msSaveBlob：只提供一个保存按钮

二、请求

在使用axios请求的时候，加上responseType: 'blob'入参。请求示例如下：

axios({
  // 请求头  
  headers: {
      Content-Type: 'application/json;charset=utf-8'  
  },
  responseType: 'blob', // // `responseType` 表示浏览器将要响应的数据类型,选项有'arraybuffer', 'document', 'json', 'text', 'stream',浏览器专属：'blob',默认是'json'
  method: 'get', // 类型根据实际接口是get还是post
  url: '接口URL',
  params: {}, // URL参数
});
1
2
3
4
5
6
7
8
9
10

因为我们使用的是文件流下载，所以返回的响应对象就不是 json 类型，要换成 blob 类型.

三、示例

以下载excel为例：

axios({
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  responseType: 'blob',
  method: 'get',
  url: '#',
  params: {}
}).then(res => {
  downloadFile(res, '文件名称','application/xlsx')
})
1
2
3
4
5
6
7
8
9
10
11

实际根据请求的方法换成是get请求还是post请求，下载不同的文件对应不同的 Blob 类型，这边excel文件下载用的是 application/xlsx，如果是下载别的类型的文件就换别的类型。
Blob相关的文档可自行查看链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/type