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

//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('下载失败,请重试');
                }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

市场复盘总结 20240228

仅用于记录当天的市场情况,用于统计交易策略的适用情况,以便程序回测 短线核心:不参与任何级别的调整,采用龙空龙模式 一支股票 10%的时候可以操作, 90%的时间适合空仓等待 二进三: 进级率 25% 最常用的二…

LeetCode104.二叉树的最大深度

题目 给定一个二叉树 root ,返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 输入:root [3,9,20,null,null,15,7] 输出:3思路 计算二叉树的最大深度通常可以使用 递归 来实现。我们可以从根…

react倒计时功能

目录 类组件写法 函数组件写法: demo: 手机获取验证码登录(验证码60秒倒计时) react倒计时5 秒 React中的倒计时可以通过使用setInterval()函数来实现。下面是一个示例代码: 类组件写法 import React from react; import { But…

什么是电子邮件客户端?如何选择合适的邮箱客户端?

“从1到10分,你会如何评价我们的电子邮件服务?” 无论你的评分是多少,影响你评分的一个重要因素肯定是电子邮件客户端提供的功能。 电子邮件客户端应该具有基本而漂亮的高级功能,以使迁移过程更容易。此外,应该有一些…

C语言第三十二弹---自定义类型:联合和枚举

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 目录 1、联合体 1.1、联合体类型的声明 1.2、联合体的特点 1.3、相同成员的结构体和联合体对比 1.4、联合体大小的计算 1.5、联合的⼀个练习 2、枚举类型 …

微信小程序引入Vant插件

Vant官网:Vant Weapp - 轻量、可靠的小程序 UI 组件库 先查看官网的版本 新建一个package.json页面,代码写上:(我先执行的npm安装没出package页面,所以先自己创建了一个才正常) {"dependencies"…

Aethir推出其首次去中心化AI节点售卖

Aethir,去中心化GPU云基础设施领导者,宣布其备受期待的节点销售。Aethir是一家企业级的以AI和游戏为重点的GPU即服务提供商。Aethir的去中心化云计算基础设施使GPU提供商能够与需要NVIDIA的H100芯片提供强大AI/ML任务支持的企业客户相连接。 此外&#x…

网页数据的存储--存储为文本文件(TXT、JSON、CSV)

用解析器解析出数据后,接下来就是存储数据了。数据的存储有多种多样,其中最简单的一种是将数据直接保存为文本文件,如TXT、JSON、CSV等。这里就介绍将数据直接保存为文本文件。 目录 一、Python存储数据的方法 1、 文件读取 2、 文件写入…

线性规划基础

利用一个简单的实例来介绍什么事线性规划,假设如果有一家巧克力工厂需要生产两种不同类型的巧克力,分别是类型A和类型B,两种巧克力用到的原材料是一样的,都是使用牛奶和可可两种材料,主要的区别是在与这两种原料的配料比区别,而对于类型A巧克力,生产一单位的巧克力会需要…

06|Mysql内部组件结构

1. 连接器 客户端要向mysql发起通信都必须先跟Server端建立通信连接,而建立连接的工作就是由连接器完成的 mysql -h host[数据库地址] -u root[用户] -p root[密码] -P 3306连接步骤: 1、如果用户名或密码不对,你就会收到一个"Access denied for us…

Unity(第十四部)光照

原始的有默认灯光、除了默认的你还可以创建 1、定向光源(类似太阳、从无限远的地方射向地面的光,光源位置并不影响照射角度等,不同方向的旋转影响角度和明亮) 1. 颜色:调整光的颜色2. 模式:混合是实时加烘…

【大数据架构(2)】kappa架构介绍

文章目录 一. Kappa架构1. Speed Layer (Stream Layer) - The Foundation of Kappa Architecture2. Stream Processing: The Heart of Kappa Architecture 二. Benefits of Kappa and Streaming Architecture1. Simplicity and Streamlined Pipeline2. High-Throughput Process…

Vue 3, TypeScript 和 Element UI Plus:前端开发的高级技巧与最佳实践

Vue 3、TypeScript 和 Element UI Plus 结合使用时,可以提供一个强大且灵活的前端开发环境。以下是一些高级用法和技巧,帮助你更有效地使用这些技术: 1. Vue 3 高级特性 Composition API 使用 setup 函数: Vue 3 引入了 Composition API&am…

软考50-上午题-【数据库】-SQL访问控制

一、SQL访问控制 数据控制,控制的是用户对数据的存储权力,由DBA决定。 DBA:数据库管理员。 DBMS数据控制应该具有一下功能: 1-1、授权语句格式 说明: 示例: 1-2、收回权限语句格式 示例: PUBLI…

【C++】拿下! C++中的内存管理

内存管理 1 C 的内存分布2 C语言的内存管理3 C的内存管理3.1 内置类型操作3.2 自定义类型操作 4 operator new与operator delete函数(重点)5 new和delete的实现原理5.1 内置类型5.2 自定义类型new的原理delete的原理new T[ N ] 的原理lete[]的原理 6 总结…

开源现场总线协议栈(ethercat、ethernet/ip、opc ua、profinet、canopen、modbus)

ecat主站及其相关: 1.soem:GitHub - OpenEtherCATsociety/SOEM: Simple Open Source EtherCAT MasterSimple Open Source EtherCAT Master. Contribute to OpenEtherCATsociety/SOEM development by creating an account on GitHub.https://github.com/…

vue项目导出excel ,文件过大导致请求超时的处理方法

一、因为文件过大,请求时间较长,就会产生请求超时的情况,处理方式是可以分为三个接口,接口1用来获取id值,接口2利用id值发起请求,询问是否准备好下载,如果没准备好,则没隔一秒再次发…

LeetCode300.最长递增子序列

题目 给你一个整数数组 nums ,找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序。例如,[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 示例 …

GaN建模:强大但富有挑战性

来源:Modeling GaN: Powerful but Challenging(10年) 文章的研究内容 这篇文章主要研究了氮化镓(GaN)高电子迁移率晶体管(HEMTs)的建模问题。GaN HEMTs是微波频段高功率发射器设计中的关键技术…

Linux服务器中文乱码如何解决

如果服务器上数字和英文均可正常展示,只有中文是奇奇怪怪的乱码,那么可以考虑是服务器本身字体输出有问题。 如何在服务器上安装中文宋体字体库呢,排查及安装字体库步骤如下: 使用 fc-list命令检查服务器是否安装字体库如果提示…