前端axios下载excel（get post），展示下载进度_前端接口返回excel怎么下载(1)

2，返回的是一堆乱码（只是看起来像乱码，可能是ArrayBuffer，也可能是Blob），一般情况下，可以通过创建dom，利用a标签进行下载：

Axios({
            method: 'post',
            header: { 'Content-Type': 'application/xls' },
            url: url,
            responseType: 'blob',
            data: params
        }).then(res => {
            let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
            let downloadElement = document.createElement('a');
            let href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = 'zoie.xls';
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
            this.resetAndClose();
        }).catch(err => {
            this.$message.error('请求错误！导出失败！');
            console.log(err);
        });

但是现实需求中涉及图片数据太多，要等好几分钟，页面没有进度提示，不够友好，所以需要进一步优化。

查阅Axios中文文档：

​

利用axios的 onDownloadProgress 显示传输流的大小，添加模态框，下载完关闭模态框。loaded表示已下载的字节数。

Axios({
            //...
            onDownloadProgress: function (progress) {
                self.downLoadInfo = true;
                if (progress.loaded > 1048576) {
                    self.finishSize = parseFloat(progress.loaded / 1048576).toFixed(1) + 'M';
                } else if (progress.loaded > 1024) {
                    self.finishSize = parseInt(progress.loaded / 1024) + 'K';
                } else {
                    self.finishSize = progress.loaded + 'B';
                }
            },
        }).then(res => {
            //...
            this.finishSize = '0B';
            this.downLoadInfo = false;
            this.progressVisible = false;
        }).catch(err => {
            this.finishSize = '0B';
            this.downLoadInfo = false;
            this.progressVisible = false;
            this.$message.error('请求错误！导出失败！');
            console.log(err);
        });

之后在IE测试，提示信息已经传输了几十M，但是没有下载，模态框也没有消失，原因是IE有自己的保存文件处理方式，

if (window.navigator.msSaveOrOpenBlob) navigator.msSaveBlob(blob, 'zoie.xls');

最终处理：

Axios({
            //...
        }).then(res => {
            let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, Moment().format("YYYY-MM-DD") + '.xls');
            } else {
                let downloadElement = document.createElement('a');
                let href = window.URL.createObjectURL(blob);
                downloadElement.href = href;
                downloadElement.download = 'zoie.xls';


### 最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。


**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

![](https://img-blog.csdnimg.cn/img_convert/a24ced2874784718655b68060f17c3b7.webp?x-oss-process=image/format,png)



![前端面试题宝典](https://img-blog.csdnimg.cn/img_convert/008c68cd878f0f6aeb5b63902f2c5916.webp?x-oss-process=image/format,png)

![前端校招面试题详解](https://img-blog.csdnimg.cn/img_convert/3813d067b23a587cae5faa597c8b9d7e.webp?x-oss-process=image/format,png)

-1720120941929)]



[外链图片转存中...(img-cGhcdLzj-1720120941930)]

[外链图片转存中...(img-wW4QVz1T-1720120941930)]