vue实现zip格式文件的下载,总结一下
前端数据流下载
·
话不多说 这次项目需求 需要下载zip格式的文件,前后使用了axios和fetch去调用都成功了,下面我来把细节代码展示出来
Axios
axios去下载的方法略有繁琐,是因为fetch有独特的封装方法,代码如下:
axios({
method: 'POST', //这个不解释了吧
url, //路径
data: params, //传参
responseType: 'blob', //告诉服务器想到的响应格式
headers: { 'Content-Type': 'application/json; application/octet-stream' },
})
.then(res => {
let blob = new Blob([res.data], { type: 'application/zip' }); //设置下载的内容以及格式
const url = window.URL.createObjectURL(blob); //设置路径
const link = window.document.createElement('a'); // 创建a标签
link.href = url;
link.download = '文件'; //设置文件名
link.style.display = 'none';
link.click();
URL.revokeObjectURL(url); // 释放内存
})
.catch(function (error) {
showMessage('下载失败', 'error');
console.log(error);
});
需要注意:
这里我们需要注意的是
- responseType: ‘blob’ 这个参数非常重要,一般不写默认是text,但如果后端返回的是数据流,那么就是一通乱码,此时需要定义为blob,告诉服务器自己需要的响应格式。
- 创建blob对象的时候 第一个参数往往是返回的那一串乱码 把他放到数组中,第二个参数是设置下载的格式,这里我们的zip,所以是application/zip,
其他类型如下:
.doc => application/msword
.docx => application/vnd.openxmlformatsofficedocument.wordprocessingml.document
.xls => application/vnd.ms-excel
.xlsx => application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt => application/vnd.ms-powerpoint
.pptx => application/vnd.openxmlformats-officedocument.presentationml.presentation - 如果使用了axios的方法,一定要注意项目文件中main.js或者main.ts是否引入了Mock,如果引入一定要隐藏,否则axios的下载的文件夹会受损!!(含泪提示,作者因为这个坑点,耽误了一下午的功夫)
Fetch
fetch的方法就省事很多,但也要注意,fetch传post文件的时候,需要先将参数转为字符串!
fetch(url, {
body: JSON.stringify(params),
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
}).then(res => {
res.blob().then(blob => {
// 转化为blobURL后再通过a标签下载
const blobUrl = window.URL.createObjectURL(blob);
const a = window.document.createElement('a');
a.href = blobUrl;
a.download = '文件.zip';
a.click();
window.URL.revokeObjectURL(blobUrl);
});
});
fetch自带的blob方法可以让我们省事很多,同时不需要考虑main,js是否引入mock的问题,唯一注意参数需要转为字符串。
下载之后如下所示!
更多推荐
已为社区贡献1条内容
所有评论(0)