当前位置: 首页 > news >正文

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技能提升

之前面试的时候&#xff0c;有遇到一个问题&#xff1a;就是下载大文件的时候&#xff0c;如何得知下载进度&#xff0c;当时的回复是没有处理过。。。 现在想到了。axios中本身就有一个下载进度的方法&#xff0c;可以直接拿来使用。 下面记录一下处理步骤&#xff1a; 参考…...

Linux: network: device事件注册机制 chatGPT; notify

ChatGPT 在 Linux 内核中,有关网络设备(net-device)的事件注册机制,允许用户在网络设备的状态发生变化(例如设备被删除、添加或修改)时接收通知。这主要通过 netdev 事件通知机制实现。具体来说,内核提供了一组用于注册和处理网络设备事件的 API。 以下是一些关键组件…...

【ROS2】测试

为什么要进行自动化测试&#xff1f; 以下是我们应该进行自动化测试的许多重要原因之一&#xff1a; 您可以更快地对代码进行增量更新。ROS 有数百个包&#xff0c;具有许多相互依赖关系&#xff0c;因此很难预见一个小变化可能引起的问题。如果您的更改通过了单元测试&#xf…...

别卷模型,卷应用:从李彦宏的AI观点谈起

2024年7月4日&#xff0c;世界人工智能大会暨人工智能全球治理高级别会议在上海世博中心隆重召开。百度创始人、董事长兼首席执行官李彦宏在产业发展主论坛上的发言&#xff0c;引起了广泛关注。他提出&#xff1a;“大家不要卷模型&#xff0c;要卷应用&#xff01;”这一观点…...

数据库(Database,简称DB)介绍

数据库&#xff08;Database&#xff0c;简称DB&#xff09;是信息技术领域中一个至关重要的组成部分&#xff0c;它按照数据结构来组织、存储和管理数据。以下是对数据库的详细介绍&#xff1a; 一、定义与基本概念 定义&#xff1a;数据库是按照数据结构来组织、存储和管理…...

Redis五种常用数据类型详解及使用场景

Redis 5 种基本数据类型 Redis 共有 5 种基本数据类型&#xff1a;String&#xff08;字符串&#xff09;、List&#xff08;列表&#xff09;、Set&#xff08;集合&#xff09;、Hash&#xff08;散列&#xff09;、Zset&#xff08;有序集合&#xff09;。 这 5 种数据类型…...

Postman API测试覆盖率:全面评估指南

&#x1f4ca; Postman API测试覆盖率&#xff1a;全面评估指南 在API测试中&#xff0c;测试覆盖率是一个关键指标&#xff0c;它衡量了测试用例对代码的覆盖程度。Postman提供了多种工具和方法来评估API测试覆盖率&#xff0c;帮助开发者和测试人员确保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开发的基础知识&#xff0c;我们可以告一段落了。下面呢&#xff0c;我们在基于今天的核心技术点SpringBoot快速入门案例进行分析。 3.3.1 Spring官方骨架 之前我们创建的SpringBoot入门案例&#xff0c;是基于Spring官方提供的骨架实现的。 Sprin…...

mysql命令练习

创建数据表grade: CREATE TABLE grade( id INT NOT NULL&#xff0c; sex CHAR(1)&#xff0c; firstname VARCHAR(20) NOT NULL&#xff0c; lastname VARCHAR(20) NOT NULL&#xff0c; english FLOAT&#xff0c; math FLOAT, chinese FLOAT )&#xff1b; 向数据表grade中插…...

AI绘画Stable Diffusion 零基础入门 —AI 绘画原理与工具介绍,万字解析AI绘画的使用教程

大家好&#xff0c;我是设计师阿威 想要入门 AI 绘画&#xff0c;首先需要了解它的原理是什么样的。 其实很早就已经有人基于深度学习模型展开了对图像生成的研究了&#xff0c;但在那时&#xff0c;生成的图像分辨率和内容都非常抽象。 直到近两年&#xff0c;AI 产出的图像…...

jenkins添加ssh证书

1、生成ssh密匙&#xff1a;windows生成ssh密匙-CSDN博客 2、添加添加ssh凭证&#xff1a;jenkins路由地址为&#xff1a;/manage/credentials/store/system/domain/_/ 点击添加凭证 选择第二个&#xff0c;将生成的私匙 id_rsa 里边的内容赋值到密钥&#xff0c;id留空自动…...

C++--accumulate介绍

在C中&#xff0c;accumulate是一个用于对容器中的元素进行累加操作的函数模板&#xff0c;位于 头文件中。它允许你对容器&#xff08;如vector或array&#xff09;中的元素进行累加运算&#xff0c;并返回累加的结果。 源代码展示 template<class InputIterator, class …...

C++写一个线程池

C写一个线程池 文章目录 C写一个线程池设计思路测试数据的实现任务类的实现线程池类的实现线程池构造函数线程池入口函数队列中取任务添加任务函数线程池终止函数 源码 之前用C语言写了一个线程池&#xff0c;详情请见&#xff1a; C语言写一个线程池 这次换成C了&#xff01;…...

【SASS/SCSS(一)】选择器

Sass 是一门高于 CSS 的元语言&#xff0c;它能用来清晰地、结构化地描述文件样式。 而SCSS是SASS引入的语法&#xff0c;是CSS的超集&#xff0c;所以所有CSS有效的使用在SCSS中都生效 一、回顾CSS选择器 通用选择器 *元素选择器类选择器&#xff0c;.classNameID选择器&am…...

详细解析Kafaka Streams中各个DSL操作符的用法

什么是DSL&#xff1f; 在Kafka Streams中&#xff0c;DSL&#xff08;Domain Specific Language&#xff09;指的是一组专门用于处理Kafka中数据流的高级抽象和操作符。这些操作符以声明性的方式定义了数据流的转换、聚合、连接等处理逻辑&#xff0c;使得开发者可以更加专注…...

C++中链表的底层迭代器实现

大家都知道在C的学习中迭代器是必不可少的&#xff0c;今天我们学习的是C中的链表的底层迭代器的实现&#xff0c;首先我们应该先知道链表的底层迭代器和顺序表的底层迭代器在实现上有什么区别&#xff0c;为什么顺序表的底层迭代器更加容易实现&#xff0c;而链表的底层迭代器…...

3.5、matlab打开显示保存点云文件(.ply/.pcd)以及经典点云模型数据

1、点云数据简介 点云数据是三维空间中由大量二维点坐标组成的数据集合。每个点代表空间中的一个坐标点&#xff0c;可以包含有关该点的颜色、法向量、强度值等额外信息。点云数据可以通过激光扫描、结构光扫描、摄像机捕捉等方式获取&#xff0c;广泛应用于计算机视觉、机器人…...

Qt-事件与信号

事件和信号的区别在于&#xff0c;事件通常是由窗口系统或应用程序产生的&#xff0c;信号则是Qt定义或用户自定义的。Qt为界面组件定义的信号往往通常是对事件的封装&#xff0c;如QPushButton的clicked()信号可以看做对QEvent::MouseButtonRelease类事件的封装。 在使用界面组…...

数据结构 day3

目录 思维导图&#xff1a; 学习内容&#xff1a; 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 按值进…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...