axios 下载大文件时,展示下载进度的组件封装——js技能提升
之前面试的时候,有遇到一个问题:就是下载大文件的时候,如何得知下载进度,当时的回复是没有处理过。。。
现在想到了。axios中本身就有一个下载进度的方法,可以直接拿来使用。
下面记录一下处理步骤:
参考链接:https://blog.csdn.net/yyh123456hhh/article/details/131637151
解决步骤1:给封装好的axios方法中添加onDownloadProgress
这个方法就是监听接口进度的方法了,可以作为入参进行处理。
解决步骤2:在使用request时,写入onDownloadProgress
export async function exportPageList(params, config, downloadProgress) {return request(`/api/quality-service/FeedReasons/export-feedreason-datas`,METHOD.GET,params,config,//请求头或者文档格式设置等downloadProgress//接口请求进度);
}
解决步骤3:具体使用方法
html部分:
<a-modaltitle="导出":footer="null":visible="visible":width="500":closable="false"><div class="download-progress"><a-progress :percent="percent" /><p>正在导出...</p></div>
</a-modal>
需要传入的参数:visible percent
是否展示弹窗和进度条占比
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;
});
最终效果如下:

相关文章:
axios 下载大文件时,展示下载进度的组件封装——js技能提升
之前面试的时候,有遇到一个问题:就是下载大文件的时候,如何得知下载进度,当时的回复是没有处理过。。。 现在想到了。axios中本身就有一个下载进度的方法,可以直接拿来使用。 下面记录一下处理步骤: 参考…...
Linux: network: device事件注册机制 chatGPT; notify
ChatGPT 在 Linux 内核中,有关网络设备(net-device)的事件注册机制,允许用户在网络设备的状态发生变化(例如设备被删除、添加或修改)时接收通知。这主要通过 netdev 事件通知机制实现。具体来说,内核提供了一组用于注册和处理网络设备事件的 API。 以下是一些关键组件…...
【ROS2】测试
为什么要进行自动化测试? 以下是我们应该进行自动化测试的许多重要原因之一: 您可以更快地对代码进行增量更新。ROS 有数百个包,具有许多相互依赖关系,因此很难预见一个小变化可能引起的问题。如果您的更改通过了单元测试…...
别卷模型,卷应用:从李彦宏的AI观点谈起
2024年7月4日,世界人工智能大会暨人工智能全球治理高级别会议在上海世博中心隆重召开。百度创始人、董事长兼首席执行官李彦宏在产业发展主论坛上的发言,引起了广泛关注。他提出:“大家不要卷模型,要卷应用!”这一观点…...
数据库(Database,简称DB)介绍
数据库(Database,简称DB)是信息技术领域中一个至关重要的组成部分,它按照数据结构来组织、存储和管理数据。以下是对数据库的详细介绍: 一、定义与基本概念 定义:数据库是按照数据结构来组织、存储和管理…...
Redis五种常用数据类型详解及使用场景
Redis 5 种基本数据类型 Redis 共有 5 种基本数据类型:String(字符串)、List(列表)、Set(集合)、Hash(散列)、Zset(有序集合)。 这 5 种数据类型…...
Postman API测试覆盖率:全面评估指南
📊 Postman API测试覆盖率:全面评估指南 在API测试中,测试覆盖率是一个关键指标,它衡量了测试用例对代码的覆盖程度。Postman提供了多种工具和方法来评估API测试覆盖率,帮助开发者和测试人员确保API的质量和稳定性。本…...
C++--find
find 在[first,last)区间找第一个等于val的元素。 template<class InputIterator, class T> InputIterator find(InputIterator first,//起始迭代器 InputIterator last, //结束迭代器 const T& val); //需要查找的值 源码剖析 template<class InputI…...
JavaWeb入门程序解析(Spring官方骨架、配置起步依赖、SpringBoot父工程、内嵌Tomcat)
3.3 入门程序解析 关于web开发的基础知识,我们可以告一段落了。下面呢,我们在基于今天的核心技术点SpringBoot快速入门案例进行分析。 3.3.1 Spring官方骨架 之前我们创建的SpringBoot入门案例,是基于Spring官方提供的骨架实现的。 Sprin…...
mysql命令练习
创建数据表grade: CREATE TABLE grade( id INT NOT NULL, sex CHAR(1), firstname VARCHAR(20) NOT NULL, lastname VARCHAR(20) NOT NULL, english FLOAT, math FLOAT, chinese FLOAT ); 向数据表grade中插…...
AI绘画Stable Diffusion 零基础入门 —AI 绘画原理与工具介绍,万字解析AI绘画的使用教程
大家好,我是设计师阿威 想要入门 AI 绘画,首先需要了解它的原理是什么样的。 其实很早就已经有人基于深度学习模型展开了对图像生成的研究了,但在那时,生成的图像分辨率和内容都非常抽象。 直到近两年,AI 产出的图像…...
jenkins添加ssh证书
1、生成ssh密匙:windows生成ssh密匙-CSDN博客 2、添加添加ssh凭证:jenkins路由地址为:/manage/credentials/store/system/domain/_/ 点击添加凭证 选择第二个,将生成的私匙 id_rsa 里边的内容赋值到密钥,id留空自动…...
C++--accumulate介绍
在C中,accumulate是一个用于对容器中的元素进行累加操作的函数模板,位于 头文件中。它允许你对容器(如vector或array)中的元素进行累加运算,并返回累加的结果。 源代码展示 template<class InputIterator, class …...
C++写一个线程池
C写一个线程池 文章目录 C写一个线程池设计思路测试数据的实现任务类的实现线程池类的实现线程池构造函数线程池入口函数队列中取任务添加任务函数线程池终止函数 源码 之前用C语言写了一个线程池,详情请见: C语言写一个线程池 这次换成C了!…...
【SASS/SCSS(一)】选择器
Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式。 而SCSS是SASS引入的语法,是CSS的超集,所以所有CSS有效的使用在SCSS中都生效 一、回顾CSS选择器 通用选择器 *元素选择器类选择器,.classNameID选择器&am…...
详细解析Kafaka Streams中各个DSL操作符的用法
什么是DSL? 在Kafka Streams中,DSL(Domain Specific Language)指的是一组专门用于处理Kafka中数据流的高级抽象和操作符。这些操作符以声明性的方式定义了数据流的转换、聚合、连接等处理逻辑,使得开发者可以更加专注…...
C++中链表的底层迭代器实现
大家都知道在C的学习中迭代器是必不可少的,今天我们学习的是C中的链表的底层迭代器的实现,首先我们应该先知道链表的底层迭代器和顺序表的底层迭代器在实现上有什么区别,为什么顺序表的底层迭代器更加容易实现,而链表的底层迭代器…...
3.5、matlab打开显示保存点云文件(.ply/.pcd)以及经典点云模型数据
1、点云数据简介 点云数据是三维空间中由大量二维点坐标组成的数据集合。每个点代表空间中的一个坐标点,可以包含有关该点的颜色、法向量、强度值等额外信息。点云数据可以通过激光扫描、结构光扫描、摄像机捕捉等方式获取,广泛应用于计算机视觉、机器人…...
Qt-事件与信号
事件和信号的区别在于,事件通常是由窗口系统或应用程序产生的,信号则是Qt定义或用户自定义的。Qt为界面组件定义的信号往往通常是对事件的封装,如QPushButton的clicked()信号可以看做对QEvent::MouseButtonRelease类事件的封装。 在使用界面组…...
数据结构 day3
目录 思维导图: 学习内容: 1. 顺序表 1.1 概念 1.2 有关顺序表的操作 1.2.1 创建顺序表 1.2.2 顺序表判空和判断满 1.2.3 向顺序表中添加元素 1.2.4 遍历顺序表 1.2.5 顺序表按位置进行插入元素 1.2.6 顺序表任意位置删除元素 1.2.7 按值进…...
IT运维监控/可观测性
?? 前言:为什么选择 OpenClaw 对接企业微信? 在2026年的企业数字化办公浪潮中,OpenClaw(曾用名 Clawdbot、Moltbot)已成长为国内领先的开源AI自动化代理工具。凭借其“自然语言驱动、插件化拓展、多平台无缝集成”的…...
网易云音乐评论数据分析:用Python爬取+可视化热门歌曲情感倾向
网易云音乐评论数据挖掘:从爬取到情感分析的完整实战指南 音乐平台的用户评论蕴含着丰富的情感价值和商业洞察。作为国内领先的音乐社区,网易云音乐的海量评论数据对产品经理优化功能、市场人员分析用户偏好具有重要价值。本文将系统性地介绍如何通过Pyt…...
Easy-Scraper:革新性HTML数据提取库的技术突破与实战应用
Easy-Scraper:革新性HTML数据提取库的技术突破与实战应用 【免费下载链接】easy-scraper Easy scraping library 项目地址: https://gitcode.com/gh_mirrors/ea/easy-scraper 在数据驱动决策的时代,网页数据采集已成为企业获取市场情报、科研机构…...
快速找回Chrome密码:ChromePass终极使用指南
快速找回Chrome密码:ChromePass终极使用指南 【免费下载链接】chromepass Get all passwords stored by Chrome on WINDOWS. 项目地址: https://gitcode.com/gh_mirrors/chr/chromepass 你是否曾经因为忘记Chrome浏览器中保存的重要登录密码而感到困扰&#…...
注意力缺陷是什么?主要有哪几种症状及专注力训练方法?
注意力缺陷病因及其对儿童发展的影响分析 注意力缺陷(ADHD)的病因较为复杂,主要涉及遗传、环境和生物因素。研究表明,遗传因素在儿童注意力缺陷中起着重要作用,有些家族中更容易出现多动症状。与此同时,环境…...
嵌入式工程师技术成长路径:从单片机到Linux驱动开发
嵌入式工程师职业发展路径的技术思考1. 职业发展阶段与技术演进1.1 单片机开发阶段对于刚毕业的电子工程专业学生,单片机开发通常是职业起点。这一阶段主要涉及:8/16/32位微控制器(如STM32系列)的应用开发基础外设驱动开发(GPIO、UART、SPI、I2C等)实时操…...
自动化立体仓库堆垛机设计(设计说明书+17张CAD图纸+开题报告+任务书+实习报告+中期检查报告+外文翻译)
自动化立体仓库堆垛机作为现代物流系统的核心设备,其设计需兼顾机械结构强度、运动控制精度与系统稳定性。该设计通过三维建模与力学仿真验证,确保堆垛机在高速运行时的结构可靠性,同时优化货叉伸缩机构与载货台升降导轨的配合间隙࿰…...
告别云端推理:手把手教你用Vivado HLS在AX7350开发板上部署YOLOv3(附完整工程)
从零部署YOLOv3到AX7350开发板:FPGA加速实战全流程解析 在边缘计算领域,FPGA因其低延迟、高能效和可重构特性,成为深度学习模型部署的热门选择。本文将带您完成YOLOv3目标检测模型在AX7350开发板上的完整部署流程,从环境准备到最终…...
3步搞定Google Drive受保护PDF:高效下载完整指南
3步搞定Google Drive受保护PDF:高效下载完整指南 【免费下载链接】Google-Drive-PDF-Downloader 项目地址: https://gitcode.com/gh_mirrors/go/Google-Drive-PDF-Downloader 你是否曾遇到过这样的情况?在Google Drive中找到一个急需的技术文档或…...
如何高效使用AsrTools:快速上手指南与实用功能详解
如何高效使用AsrTools:快速上手指南与实用功能详解 【免费下载链接】AsrTools ✨ AsrTools: Smart Voice-to-Text Tool | Efficient Batch Processing | User-Friendly Interface | No GPU Required | Supports SRT/TXT Output | Turn your audio into accurate tex…...
