简介
当后台返回的直接是文件流形式,js 在浏览器环境中是不能像其他语言一样对文件进行操作的。由于文件在网络中传输都是以二进制流形式传输的,所以我们要借助一个特殊的对象 Blob ,表示一个不可变的, 原始数据的类似文件对象,blob 对象本质上是 js 中的一个对象,里面可以储存大量的二进制编码格式的数据,实际上 file 类也是从 blob 类继承来的。
MIME类型(描述消息内容类型的因特网标准)是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开
axios + blob 实现文件下载
// 导出错误详情
downLoadDataFile() {
axios({
method: 'get',
url: '/api/export',
responseType: 'blob', //告诉服务器需要的响应格式
params: {},
headers: { // 配置请求头,若统一处理可省略
Accept: 'application/octet-stream',
token: myToken, // 获取token,这里假定 myToken
},
}).then(res => {
const contentDisposition = res.headers['content-disposition'];
const fileName = contentDisposition.split(';')[1].split('=')[1];
// 若fileName乱码,可能需要 decodeURI() 解码(如:对 ? 和 # 等进行了编码,则应当使用 decodeURIComponent() 解码)
// 以上两行代码获取服务端返回的文件名,当然也可以前端在此定义指定文件名 如:const fileName = test.xls
// 将会被放入到 blob 中的数组内容的 MIME 类型,常用 :application/vnd.ms-excel
let blob = new Blob([res.data], { type: 'text/csv'});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
}).catch(err => {
console.log('导出失败')
})
},
如需要下载的文件内容是固定不变的静态文件,便可在前端实现下载功能,不必和服务端交互,请移步Vue中 实现静态文件下载。
相关链接: Vue中 实现文件流格式图片预览