后台管理系统经常会需要导出Excel表格,h5导出、下载文件的常用方式有以下两种:
1、a链接下载,该方法较为常见。
特点:无法携带自定义请求头,接口验证用户信息不方便
import qs from 'qs';
export default function (url, data) {
if (data) {
url = url + '?' + qs.stringify(data) // GET请求,序列化请求参数
}
let a = document.createElement("a");
a.setAttribute("href", url);
a.click();
}
2、通过接口请求文件二进制流,将二进制流转为文件。
特点:可套用正常接口请求,可携带请求头
import qs from 'qs';
import axios from 'axios'
export default function (url, data, fileName) {
if (data) {
url = url + '?' + qs.stringify(data)
}
axios({
url: url,
method: 'GET',
headers: {
"Authorization": window.localStorage.getItem("token") // 在请求头添加参数
},
responseType: "blob"
}, { timeout: 5000 }).then((res) => {
if (res.status == 200) {
let blob = res.data;
let filename = fileName + ".xlsx"; // 自定义文件名
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
let a = document.createElement("a");
let url = createObjectURL(blob);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
}
}).catch((err) => {
console.log(err);
reject(err);
})
}
function createObjectURL (object) {
return window.URL
? window.URL.createObjectURL(object)
: window.webkitURL.createObjectURL(object);
}