您的位置:首页 > Web前端 > Vue.js

vue 下载后端返回的文件流

2020-07-29 22:32 169 查看

请求的时候请求头加:responseType: “blob”,
因为项目中多个地方用到,写的公共方法,传参的方式

conversionBlob(res, name) {
let blob = new Blob([res.data], {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8"
});
let contentDisposition = res.headers["content-disposition"];
let filename = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
let result = filename.exec(contentDisposition);
if (result) {
let filename;
if (name) {
let reg = /^(.*)(\.xls|\.xlsx)$/
filename = `${name.replace(reg,"$1")}失败记录.xls`;
} else {
filename = result[1];
}
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.style.display = "none";
downloadElement.href = href;
downloadElement.download = filename; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
} else {
var reader = new FileReader();
reader.onload = e => {
var message = JSON.parse(e.target.result).message;
this.$message.error(message);
};
reader.readAsText(blob);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: