axios 下载大文件时,展示下载进度的组件封装——js技能提升

之前面试的时候,有遇到一个问题:就是下载大文件的时候,如何得知下载进度,当时的回复是没有处理过。。。

现在想到了。axios中本身就有一个下载进度的方法,可以直接拿来使用。

下面记录一下处理步骤:

参考链接:https://blog.csdn.net/yyh123456hhh/article/details/131637151

解决步骤1:给封装好的axios方法中添加onDownloadProgress

这个方法就是监听接口进度的方法了,可以作为入参进行处理。

解决步骤2:在使用request时,写入onDownloadProgress

js 复制代码
export async function exportPageList(params, config, downloadProgress) {
  return request(
    `/api/quality-service/FeedReasons/export-feedreason-datas`,
    METHOD.GET,
    params,
    config,//请求头或者文档格式设置等
    downloadProgress//接口请求进度
  );
}

解决步骤3:具体使用方法

html部分:

js 复制代码
<a-modal
    title="导出"
    :footer="null"
    :visible="visible"
    :width="500"
    :closable="false"
  >
    <div class="download-progress">
      <a-progress :percent="percent" />
      <p>正在导出...</p>
    </div>
</a-modal>

需要传入的参数:visible percent

是否展示弹窗和进度条占比

js 复制代码
exportPageList(params,{responseType: 'blob'},
	(progress) => {
	  this.visible = true;
	  this.percent = (progress.loaded / progress.total) * 100;
	  if (this.percent >= 100) {
	    setTimeout(() => {
	      this.visible = false;
	    }, 200);
	  }
	}
)
.then((res) => {
  let blobUrl = window.URL.createObjectURL(res);
  let link = document.createElement('a');
  link.style.display = 'none';
  link.download = `报废原因配置_${moment().format('YYYY/MM/DD')}.xlsx`;
  link.href = blobUrl;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
})
.finally(() => {
  this.spinning = false;
});

最终效果如下:

相关推荐
Mintopia5 分钟前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face7 分钟前
事件循环
前端·javascript
谦谦橘子9 分钟前
服务端渲染原理解析
前端·javascript·react.js
Mintopia10 分钟前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
可乐加.糖14 分钟前
一篇关于Netty相关的梳理总结
java·后端·网络协议·netty·信息与通信
s91236010116 分钟前
rust 同时处理多个异步任务
java·数据库·rust
9号达人17 分钟前
java9新特性详解与实践
java·后端·面试
cg501721 分钟前
Spring Boot 的配置文件
java·linux·spring boot
啊喜拔牙28 分钟前
1. hadoop 集群的常用命令
java·大数据·开发语言·python·scala
Dontla43 分钟前
函数柯里化(Currying)介绍(一种将接受多个参数的函数转换为一系列接受单一参数的函数的技术)
前端·javascript