记一次线上无法下载EXCEL问题

问题描述：

　　线上使用XMLHttpRequest下载EXCEL，后续数据量过大，在谷歌浏览器显示 下载失败，网络错误

　　代码如下

return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true); // 也可以使用POST方式，根据接口
        xhr.responseType = "blob"; // 返回类型blob
        // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
        xhr.onload = function () {
            // 请求完成
            if (this.status === 200) {
                // 返回200
                var blob = this.response;
                console.log(this);
                let fileName = '';
                if (xhr.getResponseHeader('content-disposition')) {
                    fileName = xhr.getResponseHeader('content-disposition').split(";")[1].split("=")[1];
                } else {
                    layui.layer.msg('下载失败，系统异常！');
                    return;
                }
                var reader = new FileReader();
                reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
                reader.onload = function (e) {
                    console.log(e);

                    const href = window.URL.createObjectURL(new Blob(['\uFEFF' + e.target.result], { type: 'text/plain;charset=utf-8' }))

                    // 转换完成，创建一个a标签用于下载
                    var a = document.createElement("a");

                    a.download = decodeURIComponent(fileName);

                    //a.download = fileName;
                    a.href = e.target.result;
                    $("body").append(a); // 修复firefox中无法触发click
                    a.click();
                    resolve(200);
                    $(a).remove();
                    layui.layer.close(loadindex);
                };
            }
            else if (this.status === 204) {
                layui.layer.msg('没有数据，无法下载');
                layui.layer.close(loadindex);
            }
            else {
                layui.layer.msg('下载失败，系统异常！');
                layui.layer.close(loadindex);
            }
        };
        if (elem) {
            var form = document.querySelector(elem);
            var formdata = new FormData(form);
            console.log(formdata);
            // 发送ajax请求
            xhr.send(formdata);
        }
        else {
            xhr.send();
        }
    })

 

解决方案：

1.改成表单提交方式

2.使用axios方式：

var queryString = $(elem).serialize();
    console.log('queryString', queryString);

    url = url + "?" + queryString;
    axios
        .post(url, {}, { responseType: 'blob' })
        .then(function (response) {
            var filename = getFormatDate(new Date()) + '.xlsx';
            var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
            var result = patt.exec(response.headers["content-disposition"]);
            filename = decodeURIComponent(result[1]);

            var blob = new Blob([response.data])
            var downloadElement = document.createElement('a');
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象

            layui.layer.close(loadindex)
            console.log(response);
        })
        .catch(function (error) {
            layui.layer.close(loadindex)
            console.log(error);
        });