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

阳光穿透心脏的1/2处 2023-07-25 08:37 16阅读 0赞

在做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 = 'http://xxx.xx.xxx.xxx' // 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() || '') // 如果需要在请求头中加token
            xhr.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) { // IE10
            navigator.msSaveBlob(blob, fileName)
        } else {
            let link = document.createElement('a')
    
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob) //创建一个指向该参数对象的URL
            link.download = fileName
            link.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) return
    
        needLoadingRequestCount--
    
        if (needLoadingRequestCount === 0) {
            endLoading()
        }
    }