开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
在实现导出功能时，通过点击对应按钮，然后转到对应的下载链接，或者是通过二进制流的转换来实现下载，使用哪一种就看数据的形式是链接还是二进制数据。
若是链接，可直接使用 window.open(url)打开下载链接并自动进行下载
二进制 Blob
Blob —— 二进制大对象 ( binary large object ) ，一个支持文件操作的二进制对象，可存储图像、多媒体文件和可执行软件代码等
语法：
var myBlob = new Blob( data, type );
-
第一个参数为数组类型，传入前面的二进制数据
-
第二个参数包含两个选项：
-
type：文件类型
- 文本类型 —— type: "text/plain;charset=utf-8"
- 图片类型 —— type: "image/png"
- Html类型 —— type: 'text/html'
- zip —— type: "application/zip"
- excel —— type: "application/vnd.ms-excel"
- ...
指定包含行结束符
\n的字符串如何被写入
-
代码实现
通过请求接口，可获取到的二进制数据往往会以如下的形式展示：
要处理这些二进制数据，并最终实现可下载功能，可以使用 blob 进行转换
- new Blob() 创建 Blob 对象
- appendChild() 创建
<a>标签 - createObjectURL() 将其转换为真正的 url 地址
- 手动触发点击事件
- revokeObjectURL() 释放URL
const URL = window.URL || window.webkitURL;
let myBlob = new Blob([res], { type: 'application/zip' });
let a = document.createElement('a');
document.body.appendChild(a);
a.download = '俺是导出文件.zip';
a.href = URL.createObjectURL(myBlob);
a.target = '_blank';
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(a.href);
配置完成后，如果出现如下无法打开文件夹的错误提示
在请求数据的接口中，配置 responseType: 'blob'后再重新获取数据即可。
其中 href 是一串带有 blob 标识的链接：
在控制台打印 a，乐意看到是一段带下载链接的 Html 代码段：
