1.后端直接返回下载路径
使用a标签实现下载功能
页面代码:
使用a标签实现
2.返回文件流格式
后端返回格式Blob
接口要设置返回类型
export function exportAccountInfo(data) {
let url = '/#/#/#';
return request({
url: url,
method: 'post',
responseType: 'blob',//arraybuffer
data: data
})
}
代码实现
async _download(row) {
const res = await fileDownload({ url: row.dataUrl });
if (res.status == 200) {
let blob = new Blob([res.data], {
type: 'application/x-download;charset=utf-8',//跟后端确定
});
//type:application/vnd.ms-excel;charset=UTF-8;excel下载
let objectUrl = URL.createObjectURL(blob);
if ('download' in document.createElement('a')) {
let link = document.createElement('a');
link.href = objectUrl;
link.download = '文件名' + '文件后缀名';
//此写法兼容火狐浏览器
document.body.appendChild(link);
let evt = document.createEvent('MouseEvents');
evt.initEvent('click', false, false);
link.dispatchEvent(evt);
window.URL.revokeObjectURL(objectUrl);
} else {
navigator.msSaveBlob(blob, '文件名' + '文件后缀名');
}
} else {
this.$message.error(res.statusText);
}
},
返回信息
与FileReader.readAsDataURL(file)区别
主要区别
通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
执行时机
createObjectURL是同步执行(立即的)
FileReader.readAsDataURL是异步执行(过一段时间)
内存使用
createObjectURL返回一段带hash的url,并且一直存储在内存中,直到document触发了unload事件(例如:document close)或者执行revokeObjectURL来释放。
FileReader.readAsDataURL则返回包含很多字符的base64,并会比blob url消耗更多内存,但是在不用的时候会自动从内存中清除(通过垃圾回收机制)
优劣对比
使用createObjectURL可以节省性能并更快速,只不过需要在不使用的情况下手动释放内存
如果不太在意设备性能问题,并想获取图片的base64,则推荐使用FileReader.readAsDataURL
与FileReader.readAsDataURL(file)区别:原文链接:https://blog.csdn.net/weixin_44116302/article/details/122050793
//导出
exportResults(row){
this.listLoading = true;
exportAccountInfo({accountId:row.accountId})
.then(res => {
this.listLoading = false;
if (res.status == 200) {
console.log(res,1111);
//里面的第二个参数要与后端对应上
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8" });
console.log(blob,22222);
//decodeURIComponent解码获取文件名,这个文件名不一定需要,看需求和后端返回
const fileName = decodeURIComponent(res.headers['content-disposition'].match(/filename=(.*)/)[1]);
//拿到url
//参数是用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
let objectUrl = URL.createObjectURL(blob);
console.log(objectUrl,3333);
if ("download" in document.createElement("a")) {
let link = document.createElement("a");
link.href = objectUrl;
link.download = fileName;
//此写法兼容火狐浏览器
document.body.appendChild(link);
let evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
// URL.revokeObjectURL() 方法来释放调用 createObjectURL() 方法时创建的已经不再需要的 URL 对象,
window.URL.revokeObjectURL(objectUrl);
} else {
navigator.msSaveBlob(blob, fileName);
}
} else {
this.$message.error(res.statusText);
}
})
.catch(error => {});
},
excel文件下载
设置请求返回类型(跟后端确认)
返回的数据
// 模板下载
async excelDownload() {
const res = await downloadDoctor();
console.log(res,999)
if (res.status == 200) {
let blob = new Blob([res.data], {
type: 'application/vnd.ms-excel;charset=UTF-8',
});
let objectUrl = URL.createObjectURL(blob);
console.log(objectUrl, 111);
if ('download' in document.createElement('a')) {
let link = document.createElement('a');
link.href = objectUrl;
link.download = 'Excel模板' + '.xlsx';
//此写法兼容火狐浏览器
document.body.appendChild(link);
let evt = document.createEvent('MouseEvents');
evt.initEvent('click', false, false);
link.dispatchEvent(evt);
window.URL.revokeObjectURL(objectUrl);
} else {
navigator.msSaveBlob(blob, 'Excel模板' + '.xlsx');
}
} else {
this.$message.error(res.statusText);
}
},