后台以数据流将文件返回,将文件名放在header头里,是中文名,有乱码,如图
访问网络使用的是axios,在
// 响应拦截器
service.interceptors.response.use(
(res) => {
........
if (res.config.responseType == 'blob') {
//文件类型,如果有名称返回使用服务器返回的名称
console.log("res.headers=", res.headers);
console.log("res.config.headers=", res.config.headers);
let filename = null;
if (res.headers && res.headers["content-disposition"]) {
let disposition = res.headers["content-disposition"];
console.log("disposition=", disposition);
let sp = res.headers["content-disposition"].split("filename=");
console.log("sp=", sp);
if (sp && sp.length > 1) {
filename = decodeURI(sp[1]);
}
console.log("filename=", filename);
res.data.filename=filename;
}
}
........
}
下载代码
onClickDownload($index, row) {
downloadPexamNoticeFile(row.id).then((res) => {
console.log("downloadPexamNoticeFile",new Blob([res]))
let fileName=decodeURIComponent(this.stringToHex(res.filename));
console.log("fileName",fileName)
let blob = new Blob([res]);
let elink = document.createElement("a");
elink.download = fileName; // 下载文件名称
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink); //下载完成移除元素
window.URL.revokeObjectURL(elink); //释放掉blob对象
});
},
有乱码,用以下方法处理
stringToHex(str, joinFlag = "%") {
let arr = [];
for (let i = 0; i < str.length; i++) {
arr[i] = str.charCodeAt(i).toString(16);
}
return joinFlag + arr.join(joinFlag);
},
elink.download前后有下划线,这可能意味着download是一个保留字或者属性名包含非法字符。
修改,改成
elink['download'] = fileName; // 下载文件名称
使用方括号语法来访问download属性,这是因为它可能是一个保留字或者包含非法字符(比如空格)
如果还有问题,用这个试试
elink['download']=fileName.replace(new RegExp('"', 'g'), '')
结束!!!