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;
});

最终效果如下:

相关推荐
软件技术NINI11 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
一线大码15 分钟前
SpringBoot 优雅实现接口的多实现类方式
java·spring boot·后端
2501_9159214318 分钟前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
花伤情犹在20 分钟前
Java Stream 高级应用:优雅地扁平化(FlatMap)递归树形结构数据
java·stream·function·flatmap
日日行不惧千万里23 分钟前
2025最新仿默往 IM 即时通讯系统源码(PC + Web + iOS + Android)完整版发布!
android·ios
歪歪10023 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手25 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs29 分钟前
uniapp 修改android包名
android·uni-app
yaoxin52112333 分钟前
212. Java 函数式编程风格 - Java 编程风格转换:命令式 vs 函数式(以循环为例)
java·开发语言
苏打水com43 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html