vue中关于后端返回文件流后前端如何下载及自定义名称
前端实现下载excel、img、zip....方法有两种1. 直接调接口进行下载 后端进行处理多GET请求2. 调取接口返回对应的文件流,前端进行处理多POST请求axios.get("/dq/task/record/detail/excel/exportDetail2?id=2", {responseType: 'blob'// zip文件流需要添加,不然文件无法...
·
前端实现下载excel、img、zip....方法有两种
1. 直接调接口进行下载 后端进行处理 多GET请求
2. 调取接口返回对应的文件流,前端进行处理 多POST请求
axios.get("/api?id=2", {
responseType: 'blob' // zip文件流需要添加,不然文件无法打开
}).then(res => {
let Res = new ResDatas({
res,
}).init();
let contentType = res.headers['content-type'];
let contentDisposition = res.headers['content-disposition'];
if(contentType.indexOf('application/json') != -1) {
this.$message({
message: Res,
type: "warning"
});
} else {
contentDisposition = contentDisposition.split(";")[1];
let filename = contentDisposition.split("=")[1];
let filenameStr = window.decodeURI(filename.split(",")[0],"utf-8"); // 下载的文件名称
_customDownLoadZipGet(res.data, filenameStr);
}
})
/**
* @name:
* @param {type}
* @return:
* @description: (前端)文件流转换
*/
export const _customDownLoadZipGet = (data, fileName) => {
const blob = new Blob([data]);
const downloadElement = document.createElement("a");
const href = window.URL.createObjectURL(blob);
//后台再header中传文件名
downloadElement.href = href;
downloadElement.download = fileName;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
};
更多推荐
已为社区贡献25条内容
所有评论(0)