vue中后端返回数据流,前端实现导出下载
适用于需要验证请求头或者除了get的其他请求,如果单纯不需要验证请求头的get请求可以直接使用a标签下载
js接口请求
export function riskDownload(params) {return request({url: '接口路径',method: 'get',responseType: 'blob',selfAreaCode: true,params})
}
处理请求回来的数据流实现下载
let params={...}
riskDownload(params).then((res) => {let name = this.tabs.filter(item => item.value == this.active)[0].labelvar blob = new Blob([res], { type: res.type }) // application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型var href = window.URL.createObjectURL(blob) // 创建下载的链接if (window.navigator.msSaveBlob) {try {window.navigator.msSaveBlob(blob, name)} catch (e) {console.log(e)}} else {// 谷歌浏览器 创建a标签 添加download属性下载var downloadElement = document.createElement('a')downloadElement.href = hrefdownloadElement.target = '_blank'downloadElement.download = name // 下载后文件名document.body.appendChild(downloadElement)downloadElement.click() // 点击下载document.body.removeChild(downloadElement) // 下载完成移除元素window.URL.revokeObjectURL(href) // 释放掉blob对象}})},