在请求拦截器中配置,因为我们后台文件下载接口会有统一的标识,因此可以依据这个条件判断是否为下载接口。
if (config.url.includes('文件下载请求接口')) {
config.responseType = 'arraybuffer'//重点,一定要加这个响应类型
}
2.在响应拦截器中配置,我们这个项目响应类型只要包含这个,就可以判定下载此文件
import urlDaeCodeFileDown from '../utils/urlDaeCodeFileDown'
if (response.headers['content-type'].includes('ms-excel')) {
//因为我们这后台文件名使用URL编码,所以我这需要URL解码
let fileName = urlDaeCodeFileDown.UrlDecode(response.headers.filename);
urlDaeCodeFileDown.downloadFile(response.data, fileName)
}
3.单独创建的一个js文件放方法
export default {
downloadFile(blob, name) {
/*
处理二进制数据导出
@param blob 二进制流
@param name 文件名
*/
// type 为需要导出的文件类型,此处为xls表格类型
const file = new Blob([blob], {
type: 'application/vnd.ms-excel'
});
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL;
// 创建下载链接
const downloadHref = url.createObjectURL(file);
// 创建a标签并为其添加属性
let downloadLink = document.createElement('a');
downloadLink.setAttribute('href', downloadHref);
downloadLink.setAttribute('download', name);
//将a标签添加到body中
document.body.appendChild(downloadLink);
// 触发a标签的点击,自动下载
downloadLink.click();
//下载完成后移除a标签
document.body.removeChild(downloadLink);
//释放下载链接
url.revokeObjectURL(downloadHref);
},
// URL解码
UrlDecode(zipStr) {
var uzipStr = '';
for (var i = 0; i < zipStr.length; i += 1) {
var chr = zipStr.charAt(i);
if (chr === '+') {
uzipStr += ' ';
} else if (chr === '%') {
var asc = zipStr.substring(i + 1, i + 3);
if (parseInt('0x' + asc) > 0x7f) {
uzipStr += decodeURI('%' + asc.toString() + zipStr.substring(i + 3, i + 9).toString());
i += 8;
} else {
uzipStr += AsciiToString(parseInt('0x' + asc));
i += 2;
}
} else {
uzipStr += chr;
}
}
return uzipStr;
},
StringToAscii(str) {
return str.charCodeAt(0).toString(16);
},
AsciiToString(asccode) {
return String.fromCharCode(asccode);
}
}
4.这就是我们这个项目导出导出一个过程,如有不足,请大家多多指出,我再去优化(#^.^#)