vue项目从后端下载文件显示进度条或者loading

news2025/7/12 18:29:53
//API接口
export const exportDownload = (params?: Object, peCallback?: Function) => {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: '',
      headers: {
        'access_token': `${getToken()}`,
      },
      responseType: 'blob',
      params,
      onDownloadProgress: (pe) => {
        peCallback ? peCallback(pe) : '';
      },
    })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        console.warn(err);
      });
  });
};
function peCallback(pe) {
                  // 下载回调
//百分比计算
                  defaultPercent.value = Math.round((pe.event.loaded / pe.event.total) * 100);
                  if (pe.event.loaded === pe.event.total) {
                    showProgress.value = false;
                    message.success({ content: '下载完成', key, duration: 3 });
                  }
                }
                try {
                  exportDownload(params peCallback).then((res) => {
                    // 接口3
                    const fileName = 'xxx.xlsx';
                    let bold = new Blob([res.data]);
                    const newUrl = window.URL.createObjectURL(bold);
                    const link = document.createElement('a');
                    link.href = newUrl;
                    link.setAttribute('download', fileName);
                    document.body.appendChild(link);
                    link.click();
                    link.parentNode?.removeChild(link);
                  });
                } catch (error) {
                  message.warn('下载失败,请重试');
                }

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

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

相关文章

Flutter(三):Stack、Positioned、屏幕相关尺寸、Navigator路由跳转

页面尺寸 通知栏高度:MediaQuery.of(context).padding.top顶部导航高度:kToolbarHeight底部导航高度:kBottomNavigationBarHeight屏幕宽:MediaQuery.of(context).size.width屏幕高:MediaQuery.of(context).size.height…

SpringMVC 学习(十)之异常处理

目录 1 异常处理介绍 2 通过 SimpleMappingExceptionResolver 实现 3 通过接口 HandlerExceptionResolver 实现 4 通过 ExceptionHandler 注解实现(推荐) 1 异常处理介绍 在 SpringMVC中,异常处理器(Exceptio…

项目解决方案:海外门店视频汇聚方案(全球性的连锁店、国外连锁店视频接入和汇聚方案)

目 录 一、概述 二、建设目标及需求 2.1 建设目标 2.2 需求描述 2.3 需求分析 三、建设方案设计 3.1 系统方案拓扑图 3.2 方案描述 3.3 服务器配置推荐 四、产品功能 4.1 资源管理平台 (1)用户权限管理 (2&#xff09…

AD9226 65M采样 模数转换

目录 AD9220_ReadTEST AD9220_ReadModule AD9226_TEST_tb 自己再写个 260M的时钟,四分频来提供65M的时钟。 用 vivado 写的 AD9226_ReadTEST module AD9226_ReadTEST( input clk, input rstn,output clk_driver, //模块时钟管脚 input [12:0]IO_data, //模块数…

LACP——链路聚合控制协议

LACP——链路聚合控制协议 什么是LACP? LACP(Link Aggregation Control Protocol,链路聚合控制协议)是一种基于IEEE802.3ad标准的实现链路动态聚合与解聚合的协议,它是链路聚合中常用的一种协议。 链路聚合组中启用了…

Linux运维-Web服务器的配置与管理(Apache+tomcat)(没成功,最后有失败经验)

Web服务器的配置与管理(Apachetomcat) 项目场景 公司业务经过长期发展,有了很大突破,已经实现盈利,现公司要求加强技术架构应用功能和安全性以及开始向企业应用、移动APP等领域延伸,此时原来开发web服务的php语言已经不适应新的…

云服务器ECS价格表出炉_2024年最新价格表——阿里云

2024年最新阿里云服务器租用费用优惠价格表,轻量2核2G3M带宽轻量服务器一年61元,折合5元1个月,新老用户同享99元一年服务器,2核4G5M服务器ECS优惠价199元一年,2核4G4M轻量服务器165元一年,2核4G服务器30元3…

高防IP简介

高防IP可以防御的有包括但不限于以下类型: SYN Flood、UDP Flood、ICMP Flood、IGMP Flood、ACK Flood、Ping Sweep 等攻击。高防IP专注于解决云外业务遭受大流量DDoS攻击的防护服务。支持网站和非网站类业务的DDoS、CC防护,用户通过配置转发规则&#x…

Nginx反向代理ip透传与负载均衡

前言 上篇介绍了nginx服务器单向代理和动静分离等相关内容,可参考Nginx重写功能和反向代理-CSDN博客,这里就ip透传和负载均衡对nginx反向代理做进一步了解。 目录 一、客户端ip透传 1. 概述 2. 一级代理 2.1 图示 2.2 操作过程 3. 二级代理 3.…

type may not be empty [type-empty]

原因是使用了规范commit信息的工具,你的提交信息不符合规范,所以被拒绝了 commit规范工具 commitlinthusky 解决方式一: 修改提交信息, 使其符合规范 git commit -m "feat: 新功能"使用Git Gui的使用以下格式写提交…

wu-framework-parent 项目明细

wu-framework-parent 介绍 springboot 版本3.2.1 wu-framework-parent 是一款由Java语言开发的框架,目标不写代码但是却能完成功能。 框架涵盖无赖ORM( wu-database-lazy-starter)、仿生组件 、easy框架系列【Easy-Excel、easy-listener、easy-upsert】 授权框架(…

华为ipv6 over ipv4 GRE隧道配置

思路: PC1访问PC2时,会先构造源ipv6为2001:1::2,目的IPV6为2001:2::2的ipv6报文,然后查看PC1的路由表,发送到R1,r1接收后,以目的IPV6地址2001:2::2查询IPV6路由表,出接口为tun0/0/0…

C++ 补充之常用遍历算法

C遍历算法和原理 C标准库提供了丰富的遍历算法,涵盖了各种不同的功能。以下是一些常见的C遍历算法以及它们的概念和原理的简要讲解: for_each:对容器中的每个元素应用指定的函数。 概念:对于给定的容器和一个可调用对象&#xff…

jenkins+kubernetes+git+dockerhub构建devops云平台

Devops简介 k8s助力Devops在企业落地实践 传统方式部署项目为什么发布慢,效率低? 上线一个功能,有多少时间被浪费了? 如何解决发布慢,效率低的问题呢? 什么是Devops? 敏捷开发 提高开发效率&…

Linux中数据库sqlite3的基本命令的使用

数据库概念介绍 数据库安装 首先将本地的三个sqlite3安装包移动到共享文件夹然后在移动到自己创建的文件夹中如下: 然后对安装包进行解压如下:sudo dpkg -i *.deb检查是否安装成功sqlite数据库命令 系统命令 , 都以’.开头 .exit .quit .…

springboot+vue+mysql+easyexcel实现文件导出+导出的excel单元格添加下拉列表

Excel导出 EasyExcel官方文档 官方文档本身写的非常详细,我就是根据官方文档内的写Excel里web中的写实现的导出 后端 对象 需要写一个实体类 其中涉及到一些用到的EasyExcel的注解 ColumnWidth(20) 列宽设为20,自定义的,放在实体类上面是…

ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the ‘ssl‘报错解决

安装labelme出错了 根据爆栈的提示信息,我在cmd运行以下命令之后一切正常了,解决了问题! pip install urllib31.26.6参考网址:ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1, currently the ‘ssl’ module is compile…

智慧物流之道:数据可视化引领全局监控

在智慧物流的背景下,数据可视化催生了物流管理的全新范式。首先,通过数据可视化,物流企业可以实现对整个供应链的全景式监控。下面我就可以可视化从业者的角度,简单聊聊这个话题。 首先,图表和地图的直观展示使决策者能…

Rust使用calamine读取excel文件,Rust使用rust_xlsxwriter写入excel文件

Rust使用calamine读取已存在的test.xlsx文件全部数据,还读取指定单元格数据;Rust使用rust_xlsxwriter创建新的output.xlsx文件,并写入数据到指定单元格,然后再保存工作簿。 Cargo.toml main.rs /*rust读取excel文件*/ use cala…

mac/windows git ssh 配置多平台账号(入门篇)

目录 引子多账号多平台配置git一、.ssh文件夹路径1.1 mac 系统1.2 windows 系统 二、生成new ssh2.1 mac系统2.2 windows 系统 三、配置 config四、验证五、用ssh方式拉取远程仓库代码 引子 push代码到github仓库时,提示报错。 Push failed Remote: Support for pa…