vue前端下载——axios调用接口下载excel（get/post两种方法）

a) get方法：

 

window.location.href = url;

 

 

 

b) post方法:

第一次处理，通过创建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 = Moment().format("YYYY-MM-DD") + '.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 => {
            this.$message.error('请求错误！导出失败！');
            console.log(err);
        });

 

后来涉及图片数据太多没有提示信息，不够友好，进行第二次处理，利用axios的 onDownloadProgress显示传输流的大小，添加模态框，下载完关闭模态框：

        Axios({
            method: 'post',
            header: { 'Content-Type': 'application/xls' },
            url: url,
            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';
                }
            },
            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 = Moment().format("YYYY-MM-DD") + '.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 => {
            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, Moment().format("YYYY-MM-DD") + '.xls');

第三次处理：

        Axios({
            method: 'post',
            header: { 'Content-Type': 'application/xls' },
            url: url,
            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';
                }
            },
            responseType: 'blob',
            data: params
        }).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 = Moment().format("YYYY-MM-DD") + '.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 => {
            this.finishSize = '0B';
            this.downLoadInfo = false;
            this.progressVisible = false;
            this.$message.error('请求错误！导出失败！');
            console.log(err);
        });