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

最终效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/45774.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习 | CNN 基本原理

目录 1 什么是 CNN2 输入层3 卷积层3.1 卷积操作3.2 Padding 零填充3.3 处理彩色图像 4 池化层4.1 池化操作4.2 池化的平移不变性 5 全连接层6 输出层 前言 这篇博客不够详细&#xff0c;因为没有介绍卷积操作的具体计算&#xff1b;但是它介绍了 CNN 各层次的功能…

golang AST语法树解析

1. 源码示例 package mainimport ("context" )// Foo 结构体 type Foo struct {i int }// Bar 接口 type Bar interface {Do(ctx context.Context) error }// main方法 func main() {a : 1 }2. Golang中的AST golang官方提供的几个包&#xff0c;可以帮助我们进行A…

[杂谈] 关于 Mac 电脑使用 Logitech 鼠标导致 Vscode 侧键无法进行代码前进、回退的问题

我个人使用的是一台 14 寸的 Mac_Apple_M1&#xff0c;外接键盘显示器罗技的 MX Master 3 for Mac 的鼠标。 之前一直使用的 GoLand 开发&#xff0c;查看代码时进行代码跳转就很方便&#xff0c;滚轮键 进入函数方法&#xff0c;鼠标侧键进行前进、后退。看代码完全可以右手单…

【大模型入门】LLM-AI大模型介绍

大语言模型 (LLM) 背景 &#x1f379;大语言模型 (Large Language Model) 是一种人工智能模型, 它们通常包含数千亿甚至更多的参数&#xff0c;并在大规模数据集上进行训练。大语言模型可以处理多种自然语言任务&#xff0c;如文本分类、问答、翻译、对话等等。 自然语言模型…

qt explicit 啥意思

explicit 在 Qt 和 C 中是一个关键字&#xff0c;主要用于修饰类的构造函数。其含义和用法可以归纳为以下几点&#xff1a; 意义&#xff1a; explicit 英文直译为“明确的”、“显式的”。在 C 中&#xff0c;当一个构造函数只接受一个参数时&#xff0c;它可能会被编译器用于…

【Nail it】ROS1 ROS2 通信(ros2/ros1_bridge)

情况说明&#xff1a;目标是实现ros2容器和ros1主机的通信&#xff0c;可以起一个ros1容器作为桥梁&#xff08;若是在一个主机同时包含ros1&ros2&#xff0c;配置更加方便&#xff09;. 1.起一个 noetic 的容器 docker run -it --network host --name my_bridge ros:noe…

Java中的成员内部类

Java中的成员内部类&#xff08;也称为非静态内部类&#xff09;是定义在另一个类&#xff08;外部类&#xff09;内部的类。 这种内部类与它的外部类之间有着紧密的联系&#xff0c;主要体现在几个方面&#xff1a;它可以访问外部类的所有成员&#xff08;包括私有成员&#…

C++小白Python选手2小时入门C++

学习链接&#xff1a;C入门/2小时从C到C快速入门&#xff08;2018&#xff0c;C教程&#xff09; C在C语言的基础上增加了面向对象和通用算法语言特征。 C头文件不必是.h结尾&#xff0c;C头文件举例&#xff1a;cmath、cstdio注释&#xff1a;单行//、多行/**/为了防止名字冲…

MQ基础1

对应B站视频&#xff1a; MQ入门-01.MQ课程介绍_哔哩哔哩_bilibili 微服务一旦拆分&#xff0c;必然涉及到服务之间的相互调用&#xff0c;目前我们服务之间调用采用的都是基于OpenFeign的调用。这种调用中&#xff0c;调用者发起请求后需要等待服务提供者执行业务返回结果后…

【JavaScript脚本宇宙】强大的自然语言处理:六款JavaScript库详解

从语义到实体&#xff1a;深入了解JavaScript自然语言处理库 前言 随着人工智能和自然语言处理技术的飞速发展&#xff0c;JavaScript在这一领域也有了越来越多的应用。本文将介绍几个优秀的JavaScript库&#xff0c;它们专注于处理英语文本&#xff0c;并提供了丰富的功能和…

求立方体面积体积以及判断(c++)

代码&#xff1a; #include<iostream> using namespace std;class Cube { public:void setL(int l){m_L l;}int getL(){return m_L;}void setW(int w){m_W w;}int getW(){return m_W;}void setH(int h){m_H h;}int getH(){return m_H;}int calculateS(){return 2 * (…

netdata 监控软件安装与学习

netdata官网 netdata操作文档 前言&#xff1a; netdata是一款监控软件&#xff0c;可以监控多台主机也可以监控单台主机&#xff0c;监控单台主机时&#xff0c;开箱即用&#xff0c;web ui很棒。 环境&#xff1a; [root192 ~]# cat /etc/system-release CentOS Linux rel…

彻底清理Conda环境:使用conda remove命令的终极指南

彻底清理Conda环境&#xff1a;使用conda remove命令的终极指南 在Conda环境中&#xff0c;随着时间的推移&#xff0c;可能会积累大量不再需要的包和它们的依赖项。这不仅会占用宝贵的磁盘空间&#xff0c;还可能影响环境的性能。conda remove命令是Conda提供的一个强大工具&…

GD32F407VET6新建固件库工程并下载运行

零、所需文件及环境&#xff1a; 1、固件库的压缩包 GD32F4xx_Firmware_Library_V3.2.0.7z 官网 2、GD32F407的keil支持包 官网 兆易创新GigaDevice-资料下载兆易创新GD32 MCU 2、 keilkilll.bat 用来删除编译过程文件 可以不要 &#xff08;原子、野火资料里都有&…

LeetCode热题100(JavaScript)

哈希 两数之和 暴力解法 /*** param {number[]} nums* param {number} target* return {number[]}*/ var twoSum function(nums, target) {for(let i 0;i<nums.length;i){let x1 nums[i]for(let j 0 ; j<nums.length;j){if(i!j){let x2 nums[j]if(x1x2target){ret…

算法金 | 来了,pandas 2.0

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 今日 210/10000 Pandas 是一个强大的数据分析库&#xff0c;广泛应用于科学研究、金融分析、商业智能等领域。它提供了高效的数据结构…

[WUSTCTF2020]level4题解 入土为安的第三天

二叉树 Practice my Data Structure code..... Typing....Struct.....char....*left....*right............emmmmm...OK! Traversal! Traversal type 1:2f0t02T{hcsiI_SwA__r7Ee} Traversal type 2:20f0Th{2tsIS_icArE}e7__w Traversal type 3: //type3(&x[22]); No w…

samba服务、安装-smbpasswd工具、pdbedit工具、testparm工具

在Windows构建的网络生态里&#xff0c;各主机间的文件及打印资源共享&#xff0c;主要依赖微软专有的SMB/CIFS网络协议来达成。SMB&#xff08;即Server Message Block&#xff0c;服务消息块&#xff09;与CIFS&#xff08;全称Common Internet File System&#xff0c;通用互…

ShardingSphere的项目应用

1. 事情的起因 最近,随着业务的发展,我们的项目面临着日益增长的数据挑战。系统使用的数据库是mysql,每天的增量差不多在百万左右,由于没有进行分库分表,以前设置的单表保存已经越发不能满足需求,所以想维持表的性能,甲方考虑对这些大数据量的表进行分表操作,同时也采…

MySQL left join、right join以及inner join的区别 ?

LEFT JOIN&#xff08;左连接&#xff09;、RIGHT JOIN&#xff08;右连接&#xff09;和INNER JOIN&#xff08;内连接&#xff09;是SQL中用于连接两个或多个表以检索数据的重要操作。它们之间的主要区别在于如何处理那些在连接条件下没有匹配的行。下面通过具体的例子来说明…