在项目中, 我们通常需要导出一些数据, 后台传输过来的是文件流类型的, 这时候前端就需要对传输过来的数据进行处理, 然后下载文件.
我们可以把后台传过来的数据用 blob 对象接收.
- /* 下载 PDF 的方法 */
- downloadPdf = () => axios.post(` 这是请求的接口路径 `, {
- responseType: 'blob'
- });
获取的数据如下图
文件流 blob 对象. PNG
以谷歌浏览器举个栗子:
点击下载按钮, 请求后台接口, 获取后台传输过来的数据 data
axios 中有个方法可以把文件流对象转 blob
根据 Windows.URL.createObjectURL 方法生成一个链接
创建一个 a 标签元素
设置属性, a.download = '你的文件名字',a.href = '刚刚生成的 URL'
使这个标签触发点击事件
移除元素
接受 data 之后的处理大致代码如下
- const blobUrl = Windows.URL.createObjectURL(data);
- const title = '下载文件的标题. pdf';
- const a = document.createElement('a');
- a.style.display = 'none';
- a.download = title;
- a.href = blobUrl;
- a.click();
- document.body.removeChild(a);
下面是 IE 浏览器中处理方法:
接受 data 之后的处理大致代码如下
- if ('msSaveOrOpenBlob' in navigator) { // 判断是 IE 的浏览器, 调用 IE 文件下载的方法
- const blob = new Blob([data], { type: 'application/pdf' });
- const title = 'ie 下载. pdf';
- Windows.navigator.msSaveOrOpenBlob(blob, title);
- }
如果是其他类型的文件, 只需要把相应的后缀替换掉即可!
来源: http://www.jianshu.com/p/0ac29d619102