Util: 前端 下载/导出 文件

实现代码

export const exportFile = (url, fileName) => {
    function createObjectURL(object) {
        return window.URL ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object)
    }
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    xhr.open('get', url);
    xhr.setRequestHeader('Auth-User-Token', getCookie('token'));
    xhr.responseType = 'blob';
    xhr.onload = function (e) {
        if (this.status === 200) {
            let blob = this.response;
            let newFileName = `${fileName}`;
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, newFileName)
            } else {
                let a = document.createElement('a');
                let url = createObjectURL(blob);
                a.href = url;
                a.download = newFileName;
                document.body.append(a);
                a.click();
                window.URL.revokeObjectURL(url);
            }
        }
    };
    xhr.send(formData)
};

注意一定要设置
xhr.responseType = 'blob'
Ajax，Axios 中一样有对应设置

场景

后端以流的方式返回 Excel 文件的场景适用此方法。
此时 HTTP 的响应头 Response Headers 中 Content-Type: application/vnd.ms-excel;
参考：

Response Headers
HTTP/1.1 200
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Disposition
Content-Disposition: attachment;filename=%E8%AE%A2%E5%8D%95%E5%85%A8%E8%BF%87%E7%A8%8B%E8%B7%9F%E8%B8%AA.xlsx
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: SAMEORIGIN
Content-Type: application/vnd.ms-excel;charset=UTF-8
Transfer-Encoding: chunked
Date: Thu, 28 Jul 2022 07:44:59 GMT
Keep-Alive: timeout=60
Connection: keep-alive

参考

• 处理 ajax 请求 excel