原生请求下载excel文件
//如果文件流下载是不带code，使用axios请求进行下载会被响应拦截，故使用原生请求进行下载
export function download(url, name) {
var xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var blob = new Blob([xhr.response], { type: "text/xls" });
var csvUrl = URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = csvUrl;
if (!name && xhr.response.headers['content-disposition']) {
//后端需要对content-disposition这个字段进行授权，前端才能获取到后端返回的名称
let dispositionStr = xhr.response.headers['content-disposition'];
// 获取后端返回的文件名
let dispositionArr = dispositionStr.split(";");
// 文件名可能含有汉字,因此在后端进行了UTF-8编码处理,此处进行解码
let res = decodeURIComponent(dispositionArr[1]);
name = res.split("''")[1];
}
link.download = name + '.xlsx';
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(csvUrl);
}
};
xhr.send();
}
如果后端返回的文件格式是txt，前端可以将.txt文件转成.xlsx。
import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
baseURL: 'http://www.***.com/aips/',
timeout: 9E3 // 请求超时时间
});
// 响应拦截器
service.interceptors.response.use((response) => {
// 返回啊应头,下载文件可获取content-disposition属性
response.data.headers = response.headers
return response.data;
}, (error)=>{
})
axios({
url: "http://www.***.com/***/***", //用于请求的服务器 URL
params: {}, //必须是一个无格式对象(plain object)或 URLSearchParams 对象
method: 'get', //请求时使用的方法,get默认
responseType: 'blob', //表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json'(默认), 'text', 'stream'
}).then(data => {
if (!data) return alert('文件下载失败');
let fileName = '统计表计';
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx');
} else {
let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
if (!fileName && data.headers['content-disposition']) {
//后端需要对content-disposition这个字段进行授权，前端才能获取到后端返回的名称
let dispositionStr = data.headers['content-disposition'];
// 获取后端返回的文件名
let dispositionArr = dispositionStr.split(";");
// 文件名可能含有汉字,因此在后端进行了UTF-8编码处理,此处进行解码
let res = decodeURIComponent(dispositionArr[1]);
fileName = res.split("''")[1];
}
link.setAttribute('download', fileName + '.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
});
vue使用blob下载二进制文件流时无法获取响应头里面的Content-Disposition来提取文件名的解决办法blob获取文件名风~蒲公英的博客-CSDN博客
