Vue.js下载二进制流文件并转为Excel文件

流程原理:

1、获取后端传递来的二进制数据流
2、传递到封装的函数当中,需要传递二进制数据和文件名(不传有默认文件名)
3、将二进制数据流包裹成一个new Blob对象
4、将Blob对象转化为一个URL资源地址,这个地址时一个本地地址
5、创建一个a标签,设置隐藏,添加下载属性,添加到body当中,启动下载
6、下载完毕之后,删除a标签

以下为下载Excel文件的核心逻辑,传入二进制流data和文件名fileName即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let blob = new Blob([data], {
type: 'application/octet-stream'
}); // 转化为blob对象
let filename = fileName || 'filename.xls'; // 判断是否使用默认文件名
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, filename);
} else {
var blobURL = window.URL.createObjectURL(blob); // 将blob对象转为一个URL
var tempLink = document.createElement('a'); // 创建一个a标签
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename); // 给a标签添加下载属性
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink); // 将a标签添加到body当中
tempLink.click(); // 启动下载
document.body.removeChild(tempLink); // 下载完毕删除a标签
window.URL.revokeObjectURL(blobURL);
}

注意事项:在vue框架当中,数据请求是借助axios的,为此,在发送请求时,需要修改responseType,改为arraybuffer,axios默认情况下responseType为json,若是不修改,很可能下载时候会是乱码,或者为null。

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :