【前端】vue下载文件,返回值为 blob 文件流(添加这个属性 responseType: ‘blob‘),失败后的错误信息处理以及成功处理。
1、当我们下载文件时,成功可以直接下载,代码如下downExcel() {this.loading = true;//文件名let fileName = "xxx.xlsx";downExcel(fileName).then(res => {//将文件流转成blob形式const blob = new Blob([res.data],{type: "application/vnd.ms-ex
·
1、当我们下载文件时,成功可以直接下载,代码如下
downExcel() {
this.loading = true;
//文件名
let fileName = "xxx.xlsx";
downExcel(fileName).then(res => {
//将文件流转成blob形式
const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});
//创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
const eLink = document.createElement("a");
eLink.download = fileName;
eLink.style.display = "none";
eLink.href = URL.createObjectURL(blob);
document.body.appendChild(eLink);
eLink.click();
URL.revokeObjectURL(eLink.href); // 释放URL 对象
document.body.removeChild(eLink);
this.loading = false;
}).catch(error=>{console.log(error)})
},
2、如果下载失败,后端返回json的错误信息
downExcel() {
this.loading = true;
let fileName = "xxx.xlsx";
downExcel(fileName).then(res => {
let data = res.data;
let fileReader = new FileReader();
fileReader.onload = function(event) {
try {
let jsonData = JSON.parse(event.target.result);
if (jsonData.code) {
alert("失败。。")
}
} catch (err) {
// 解析成对象失败,说明是正常的文件流
//将文件流转成blob形式
const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});
//创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
const eLink = document.createElement("a");
eLink.download = fileName;
eLink.style.display = "none";
eLink.href = URL.createObjectURL(blob);
document.body.appendChild(eLink);
eLink.click();
URL.revokeObjectURL(eLink.href); // 释放URL 对象
document.body.removeChild(eLink);
}
};
fileReader.readAsText(data);
this.loading = false;
}).catch(error=>{console.log(error)})
},
3、fileReader.onload 方法内使用外部 this,也可直接赋值外部对象,此处用提示信息演示
downExcel() {
this.loading = true;
let fileName = "xxx.xlsx";
downExcel(fileName,this.ids).then(res => {
let data = res.data;
let fileReader = new FileReader();
fileReader.onload = (event) => {
try {
let jsonData = JSON.parse(event.target.result);
if (jsonData.code) {
// 说明是普通对象数据,后台转换失败
console.log(jsonData)
this.$message({
type: "error",
message: jsonData.msg
});
}
} catch (err) {
console.log("流处理")
}
};
fileReader.readAsText(data);
this.loading = false;
}).catch(error=>{console.log(error)})
},
4、a() {}和a = () => {}的区别
这两种方式的区别,就是 this的指向区别:
1、下面这种方式,this的范围指当前 function。
2、下面这种方式,this的范围指整个页面,这样就可以使用 this 的相关函数,以及属性的赋值
更多推荐
所有评论(0)