

utils.js文件
import axios from 'axios'
// 导出Excel公用方法
export function exportMethod(data) {
axios({
method: data.method,
url: `${data.url}${data.params ? '?' + data.params : ''}`,
responseType: 'blob'
}).then((res) => {
const link = document.createElement('a')
console.log(res.data)
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
console.log(blob)

link.style.display = 'none'
link.href = URL.createObjectURL(blob)
// link.download = res.headers['content-disposition'] //下载后文件名
link.download = data.fileName //下载的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}).catch(error => {
this.$Notice.error({
title: '错误',
desc: '网络连接错误'
})
console.log(error)
})
}
.vue组件代码
import { exportMethod } from '@/assets/utils'
exportTable () {
// 导出
let myObj = {
method: 'get',
url: '/api/management/statistics/eColumn',
fileName: '栏目汇总表',
// params: `startDate=${changeDate(this.dateValue[0])}&endDate=${changeDate(this.dateValue[1])}`
}
exportMethod(myObj)
}
},
原生异步方法接受文件流(下载):
function downLoadByUrl(url){
var xhr = new XMLHttpRequest();
//GET请求,请求路径url,async(是否异步)
xhr.open('GET', url, true);
//设置请求头参数的方式,如果没有可忽略此行代码
xhr.setRequestHeader("token", cookieToken);
xhr.setRequestHeader("userId", userId);
//设置响应类型为 blob
xhr.responseType = 'blob';
//关键部分
xhr.onload = function (e) {
//如果请求执行成功
if (this.status == 200) {
let blob = this.response;
let filename = "XX信息-"+new Date()+".xlsx";//如123.xls
let a = document.createElement('a');
blob.type = "application/octet-stream";
//创键临时url对象
let url = URL.createObjectURL(blob);
a.href = url;
a.download=filename;
a.click();
//释放之前创建的URL对象
window.URL.revokeObjectURL(url);
}
};
//发送请求
xhr.send();
}
注意:
后端返回的stream流,可以采用原生和axios获取成功。jquery.ajax不能接受,
$.ajax是基于HTTP的,而HTTP是一个设计来传输完整数据的协议,而不是用来处理连续的数据流。