前端axios下载excel（get/post），展示下载进度

前端下载一般有两种方法：1，已知文件地址，直接下载；2，axios的get和post请求。

一、直接下载

         使用a标签，可以直接将href属性写成目标地址，此时下载的文件名称为一串乱码，如果想要在下载的时候为其命名，可以将download属性写成我们期望的文件名称。

下载模板

二、接口请求url

1，文件已经生成到服务器上，接口返回的是url（http://xxx/aaa.xlsx），此时有两种方法：

• 直接修改href为对应链接

window.location.href = url;

• 利用a标签可以直接下载的功能，创建dom，设置属性，触发点击下载

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';
                document.body.appendChild(downloadElement);
                downloadElement.click();
                document.body.removeChild(downloadElement);
                window.URL.revokeObjectURL(href);
            }
            this.resetAndClose();
            this.finishSize = '0B';
            this.downLoadInfo = false;
            this.progressVisible = false;
        }).catch(err => {
            //...
        });

总结

        本篇记录了前端使用get和post两种方法下载文件，并且介绍了axios的onDownloadProgress函数，使用该函数获取下载进度，可供参考！