一、在vux中使用了 Axios 后,后端返回来的是文件流 这里我们可以直接用 Axios 方法返回的 res 赋值到 blob
const blob = res
const reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function (ev) {
if (window.navigator.msSaveOrOpenBlob) {
// 兼容ie11
const blobObject = new Blob([blob])
window.navigator.msSaveOrOpenBlob(blobObject, '文件名称.xlsx')
} else {
const url = URL.createObjectURL(new Blob([blob]))
const a = document.createElement('a')
document.body.appendChild(a) // 此处增加了将创建的添加到body当中
a.href = url
a.download = '文件名称名称.xlsx'
a.target = '_blank'
a.click()
a.remove() // 将a标签移除
}
}
二、使用原生的 XMLHttpRequest 文件流下载
- xhr.setRequestHeader(‘token’,‘token’); // 在headers加参方法
var url = ‘请求接口链接’
const xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.responseType = 'blob'
xhr.onload = function () {
const blob = xhr.response
const reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function (ev) {
if(window.navigator.msSaveOrOpenBlob){
// 兼容ie11
let blobObject = new Blob([blob]);
window.navigator.msSaveOrOpenBlob(blobObject, '文件名称名称.xlsx');
}else{
let url = URL.createObjectURL(new Blob([blob]));
let a = document.createElement('a');
document.body.appendChild(a); //此处增加了将创建的添加到body当中
a.href = url;
a.download = '文件名称名称.xlsx';
a.target = '_blank';
a.click();
a.remove(); //将a标签移除
}
}
}
xhr.onerror = function () {
console.error('could not download file')
}
xhr.send()