Vue前端:导出表格 未发现文件错误
在写javaWeb项目导出表格文件的接口时,后端已经成功生成了表,在前端点击下载的时候报了错误,如下图所示,未发现文件错误。并且文件格式是.html。
前端代码:
downloadAssessSite(num){
showLoading("正在导出表,请稍后...");
let single = this.checkdownload; //获取选中的数据
let data = {data:JSON.stringify(single)}//将checkdownload的数据转为JSON格式后传给data
//console.log(single);
//将data数据通过request请求传给后端接口/mng/assessSite/downloadAssessSite
this.$request.downFile(this,'/mng/assessSite/xxxx.do',data).then(res =>{//接口名
let blob = new Blob([res.data],{ //Blob类型,大文件类型
type:'application/vnd.ms-excel'//当前文件格式是表格
});)
let objectUrl = URL.revokeObjectURL(blob);//此句出错
//let objectUrl = URL.createObjectURL(blob)
let link = document.createElement("a");//前端vue中动态创建a标签下载文件
let fname = '表';//下载文件的名字
link.href = objectUrl;
link.setAttribute("download",fname);
document.body.appendChild(link);
link.click();
hideLoading(); //请求成功关闭loading
this.$refs.assessSiteTable.clearSelection();//清空列表中选中状态
}).catch(err => {
error(this,err);
hideLoading();
});
}
其中的一句
let objectUrl = URL.revokeObjectURL(blob);//此句出错
换成
let objectUrl = URL.createObjectURL(blob)
便可成功导出文件
其实就是revokeObjectURL函数和createObjectURL函数的区别,待我搞懂后回来填坑。
以上