前端下载二进制流文件解决方案

解决方案"/>

前端下载二进制流文件解决方案

在做vue项目的某一个功能的数据导出功能时，后端直接向前端输出数据流，于是利用原生XMLHttpRequest做了一个小插件

用法：

import { httpRequestExport } from '@api/download'
exportData() {httpRequestExport('/api/exportData.do', 'post', {projDevelopCode: this.projDevelopCodeval,yearMonth: this.YearMonthval}).then(result => {console.log('success');});
}

download.js

/** @author: hruomei* @description: 下载二进制流数据公共方法，loading使用elementUI的loading;可以根据需要更改* @create-time: 2020/4/11* @last-update-time: 2020/4/11* @version: V1.0
*/import {Message,Loading
} from 'element-ui'const baseURL = '' // baseURL可以从全局配置文件中获取/** @description 下载二进制文件* @method downLoadBlobFile* @param {String} uri 请求路径，可以是绝对路径或者相对路径* @param {String} method 请求方式post/get,默认post* @param {Object} param 请求参数{a:xx,b:xx}
*/
export function httpRequestExport(uri, method = 'post', param = {}) {return new Promise((resolve, reject) => {var xhr = new XMLHttpRequest()xhr.open(method, posUrl(uri) ? baseURL + uri : uri)xhr.responseType = "arraybuffer" // or "blob";这里如果不设置返回的数据很可能是乱码// xhr.setRequestHeader("Authorization", getToken() || '') // 如果需要在请求头中加tokenxhr.setRequestHeader("Cache-Control", 'no-cache, no-store,max-age=0, must-revalidate')xhr.setRequestHeader("Pragma", 'no-cache')xhr.setRequestHeader("Expires", '0')xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded')xhr.onloadstart = function () {showFullScreenLoading()}xhr.onload = function () {// 这里假定后端相应的数据类型是application/vnd.ms-excel;charset=UTF-8；如果Content-Type不是application/vnd.ms-excel;charset=UTF-8,那么请求出现了异常if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === "application/vnd.ms-excel;charset=UTF-8") {// 这里后端需要设置context.Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition"); // 否则会报Refused to get unsafe header "Content-Disposition"const contentDisArr = xhr.getResponseHeader("Content-Disposition").split(';')// 将服务端返回的文件流excel文件downLoadBlobFile(new Blob([xhr.response], { type: xhr.getResponseHeader('Content-Type') // 文件类型}), decodeURI(contentDisArr[1].split('=')[1])) // 这里因为后端将文件名写在响应头Content-Disposition；所以需要从响应头中获取文件名} else {showErrorMessage()}tryHideFullScreenLoading()resolve(xhr);}xhr.onerror = function () {tryHideFullScreenLoading()showErrorMessage()reject(xhr)}xhr.send(getUrlParams(param)) // 参数需要是a=xx&b=xx的形式，否则控制台的FORM DATA会变成[object object]:})
}/** @description 判断url是否为绝对路径* @method posUrl* @param {String} url 路径
*/
export function posUrl(url) {return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
}/** @description 利用a标签下载二进制流数据* @method downLoadBlobFile* @param {Blob} blob 二进制流对象* @param {Blob} fileName 文件名
*/
export function downLoadBlobFile(blob, fileName) {if (window.navigator.msSaveOrOpenBlob) { // IE10navigator.msSaveBlob(blob, fileName)} else {let link = document.createElement('a')link.style.display = 'none'link.href = URL.createObjectURL(blob) //创建一个指向该参数对象的URLlink.download = fileNamelink.click() // 触发下载URL.revokeObjectURL(link.href) // 释放通过 URL.createObjectURL() 创建的 URL}
}/** @description 获取形如a=xx&b=xx的结果* @method getUrlParams* @param {Object} params 参数对象{a:xx,b:xx}
*/
export function getUrlParams(params) {if (!params) return '';return Object.keys(params).reduce((result, key) => {result += `${result ? '&' : ''}${key}=${params[key]}`return result}, '')
}let loading
function startLoading() {loading = Loading.service({lock: true,text: '正在下载',background: 'rgba(0, 0, 0, 0.7)'})
}function endLoading() {loading.close()
}export function showErrorMessage(message = '请求异常,请重试') {Message({message,type: 'error',duration: 5 * 1000})
}let needLoadingRequestCount = 0
export function showFullScreenLoading() {if (needLoadingRequestCount === 0) {startLoading()}needLoadingRequestCount++
}export function tryHideFullScreenLoading() {if (needLoadingRequestCount <= 0) returnneedLoadingRequestCount--if (needLoadingRequestCount === 0) {endLoading()}
}