直接上方法了,引入即可!
export function exportSales(url, filename, token) { function createObjectURL(object) { return window.URL ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object); } var xhr = new XMLHttpRequest(); var formData = new FormData(); xhr.open("get", url); //url填写后台的接口地址,如果是post,在formData append参数(参考原文地址) xhr.setRequestHeader("User-Token", token); xhr.responseType = "blob"; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename); } else { var a = document.createElement("a"); var url = createObjectURL(blob); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } } }; xhr.send(formData); }
二、vue封装的方法
由于封装的方法,这样下载没有code 返回,所以需要自行处理下逻辑,我的参考
请求的js
export function exportlog(params) { //客户端日志list return request({ url: '/tax/task/log/export', method: 'get', responseType: 'blob', // 核心,需要转成blob params }) }
页面内处理
exportlog(this.listQuery).then((res) => { const imgURL = [(URL || webkitURL).createObjectURL(res)] // 直接下载 window.open(imgURL ) // 知道下载文件名 const a = document.createElement('a') //创建a标签 a.style.display = 'none' a.href = imgURL // 指定下载链接 let title = '报税助手申报记录' //指定下载文件名 if (this.listQuery.startTime) { title += this.listQuery.startTime + '-' + this.listQuery.endTime } a.download = title a.click() //触发下载 URL.revokeObjectURL(a.href) //释放URL对象 })