1. 请求接口中添加responseType: 'blob'
// 下载文件,添加请求头
import axios from 'axios'
export default function downLoadFile(url, method = 'get', params = {}) {
axios({
method,
url,
// post 请求的话改成 date: params
params,
headers: {
// 在这里添加自己需要的请求头
appkey: '7dcf52820f1a4a31bae764033f08d40'
},
responseType: 'blob'
}).then(res => {
//导出文件
// 通过a标签打开新页面下载文件
const a = document.createElement('a')
// 构造一个blob对象来处理数据
const blob = new Blob([res.data])
if (res.headers['content-disposition']) {
// 拿到用户上传的文件名
let fileName = res.headers['content-disposition']
// 截取=之后的字符串
fileName = fileName.substring(fileName.lastIndexOf("="))
fileName = fileName.substring(1)
// 编码转换为中文
gbkconvert(fileName,(res) => {
fileName = res
// URL.createObjectURL()会产生一个url字符串,可以像使用普通 URL 那样使用它,比如用在 img.src 上
a.href = URL.createObjectURL(blob)
// a标签里有download属性可以自定义文件名
a.setAttribute(
'download',
fileName
)
document.body.appendChild(a)
a.click();
document.body.removeChild(a)
})
}
})
}
2. 如果res.headers['content-disposition']中返回的fileName是utf-8编码,不是中文的话,需要下面的函数解码。如果是gbk编码,把 charset=uft-8 替换成 charset=gdk 即可
function gbkconvert(gbkStr, callback) {
var script = document.createElement('script');
script.id = 'gbkconvert';
script.src = 'data:text/javascript;charset=utf-8,gbkconvertCb("' + gbkStr + '");';
document.body.appendChild(script);
window.gbkconvertCb = (res) => {
callback && callback(res);
}
}