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

        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中文文档]( )：  
  


![](https://img-blog.csdnimg.cn/6c67593d964640708933d26bb167d78d.png)​


        利用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 => {
//…
});

## 总结


### 计算机网络

*   HTTP 缓存

*   你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

*   HTTP 常用的请求方式，区别和用途？

*   HTTPS 是什么？具体流程

*   三次握手和四次挥手

*   你对 TCP 滑动窗口有了解嘛？

*   WebSocket与Ajax的区别

*   了解 WebSocket 嘛？

*   HTTP 如何实现长连接？在什么时候会超时？

*   TCP 如何保证有效传输及拥塞控制原理。

*   TCP 协议怎么保证可靠的，UDP 为什么不可靠？


![](https://img-blog.csdnimg.cn/img_convert/614771dc66a0fec7a3e33c2c7e1fa878.png)



### 算法

* 链表

* 字符串

* 数组问题

* 二叉树

* 排序算法

* 二分查找

* 动态规划

* BFS

* 栈

* DFS

* 回溯算法

  ![](https://img-blog.csdnimg.cn/img_convert/6c250b6200355d0edce85b970db267bd.png)