vue使用axios实现下载文件
项目中,使用到了下载文件,但是调用后台的接口并没有弹出下载框,因为后台传的是文件流,我们前端需要自己解析如下:download(EID) {console.log("下载文件");console.log(EID);let id = "b37dd50c-0418-4f1c-a964-b16abf7819a1";axios({...
·
项目中,使用到了下载文件,但是调用后台的接口并没有弹出下载框,因为后台传的是文件流,我们前端需要自己解析
如下:
download(EID) {
console.log("下载文件");
console.log(EID);
let id = "b37dd50c-0418-4f1c-a964-b16abf7819a1";
axios({
// 用axios发送post请求
method: "get",
url: `/api/v5/customer/service/${id}/resource`, // 请求地址
// data: form, // 参数
responseType: "blob", // 表明返回服务器返回的数据类型
headers: {
"X-Authorization": getToken()
}
}).then(res => {
// 处理返回的文件流
const content = res.data;
const blob = new Blob([content]);
const fileName = "测试表格123.xls";
if ("download" in document.createElement("a")) {
// 非IE下载
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);
}
else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
});
},
这种方法实验可行,下载弹框正确弹出
jpg等有些方式预览器不支持弹出窗口, 可以直接看下面这个解决方式
个人认为很详细了:
https://blog.csdn.net/weixin_41804429/article/details/100128404
更多推荐
已为社区贡献2条内容
所有评论(0)