后台以数据流将文件返回,将文件名放在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'), '')
结束!!!