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) => {// 接口3const 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://xiahunao.cn/news/2813802.html

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

相关文章

数据结构2月21日

双向链表: func函数&#xff1a; #include <stdio.h> #include <stdlib.h> …

数据分析-Pandas数据探查初步:离散点图

数据分析-Pandas数据探查初步&#xff1a;离散点图 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff…

若依前后端分离版开源项目学习

前言&#xff1a;vscode中vue代码没有高亮显示&#xff0c;可以下载vetur插件解决&#xff0c;ctrl点击无法跳转函数定义问题&#xff0c;可以下载vue-helper插件解决&#xff1b;idea中ctrl点击函数即可跳转函数定义。 一、登录 1.生成验证码 基本思路&#xff1a; 后端生…

基于HT32的智能家居demo(蓝牙上位机)

参加合泰杯作品的部分展示&#xff0c;基于HT32的智能家居&#xff0c;这里展示灯光的相关控制&#xff0c;是用蓝牙进行的数据透传&#xff0c;参考了一些资料&#xff0c;美化封装了一下之前的上位机界面。 成果展示 点击主界面的蓝牙设置&#xff0c;进行连接&#xff0c;下…

【推荐算法系列六】WideDeep模型

文章目录 参考资料 模型结构模型的记忆能力模型的泛化能力问题 参考资料 见微知著&#xff0c;你真的搞懂Google的Wide&Deep模型了吗&#xff1f;keras实现的代码参考 模型结构 它是由左侧的 Wide 部分和右侧的 Deep 部分组成的。Wide 部分的结构太简单了&#xff0c;就是…

Eslint在Vscode中使用技巧的相关技巧

ps :该文章会详细结论构建一个脚手架遇到的问题&#xff0c;会持续更新&#xff0c;请定时查看 Eslint相关​ 在vscode中使用eslint插件 在vscode中用户配置没有开启eslint.enable 在vscode中工作区配置开启eslint.enable settings.json中没有做eslint相关配置 在编写的vue…

Jenkins参数化构建项目(Git+docker部署+Python+flask项目)

目录 一、概述二、环境三、部署流程3.1 gitee上传代码3.2 jenkins配置3.2.1 Gitee配置3.2.2 SSH配置3.2.3 新建任务 3.3 执行过程3.3.1初始化构建3.3.2 重新提交代码构建 一、概述 使用Jenkins进行CI/CD自动化部署&#xff0c;参数化构建Git代码拉取&#xff0c;docker镜像打包…

开创5G无线新应用:笙科电子5.8GHz 射频芯片

笙科电子(AMICCOM) 5.8GHz A5133射频芯片是一款专门设计用于在5.8GHz频率范围内&#xff08;5725MHz - 5850MHz)进行射频信号处理的集成电路。这些集成电路通常包括各种功能模块&#xff0c;如射频前端、混合器、功率放大器、局部振荡器等&#xff0c;以支持无线通信系统的各种…

3D可视化项目,选择unity3D还是three.js,是时候挑明了。

2023-08-10 23:07贝格前端工场 Hi&#xff0c;我是贝格前端工场&#xff0c;在开发3D可视化项目中&#xff0c;是选择U3D还是three,js时&#xff0c;很多老铁非常的迷茫&#xff0c;本文给老铁们讲清楚该如何选择&#xff0c;欢迎点赞评论分享转发。 一、Unity3D和three.js简…

Android Activity启动模式

文章目录 Android Activity启动模式概述四种启动模式Intent标记二者区别 Android Activity启动模式 概述 Activity 的管理方式是任务栈。栈是先进后出的结构。 四种启动模式 启动模式说明适用场景standard标准模式默认模式&#xff0c;每次启动Activity都会创建一个新的Act…

10W 音频功率放大电路芯片TDA2003,可用于汽车收音机及收录机中作音频功率放大器,内部具有短路保护和过热保护等功能

TDA2003 用于汽车收音机及收录机中作音频功率放大器。 采用 TO220B5 封装形式。 主要特点&#xff1a; ⚫ 内部具有短路保护和过热保护。内部具有地线开路、电源极性接 反和负载泄放电压反冲等保护电路。 ⚫ 输出电流大。 ⚫ 负载电阻可低至 1.6 。 …

Linux:Ansible的常用模块

模块帮助 ansible-doc -l 列出ansible的模块 ansible-doc 模块名称 # 查看指定模块的教程 ansible-doc command 查看command模块的教程 退出教程时候建议不要使用ctrlc 停止&#xff0c;某些shell工具会出现错误 command ansible默认的模块,执行命令&#xff0c;注意&#x…

ARM系列 -- 虚拟化(一)

今天来研究一个有意思的话题&#xff0c;虚拟化&#xff08;virtualization&#xff09;。 开始前&#xff0c;先闲扯一下&#xff0c;最近一个词比较火&#xff0c;“元宇宙&#xff08;Metaverse&#xff09;”。在维基百科里面是这么定义元宇宙的&#xff0c;“The Metaver…

web学习笔记(二十一)

目录 1.构造函数创建对象 1.1规则 1.2 new关键字调用构造函数时&#xff0c;函数内部做了什么事情&#xff1f; 1.3总结 2.混合模式创建对象 3.JavaScript 继承---借助构造函数 4.原型链 1.构造函数创建对象 1.1规则 &#xff08;1&#xff09;构造函数----函数名的首字…

微信小程序page组成部分分析与创建page方法演示

上文 简单讲解并梳理微信小程序默认几个文件和文件夹结构及其作用 我们简述了整个小程序创建之初 几个模块与文件的作用 其中 我们说过 pages 就是放我们所有page界面的 它所有page模块 都是分为四个文件 其中 js 其中包括 页面逻辑 响应式数据 函数 json 文件&#xff0c;界…

DVWA 靶场之 Command Injection(命令执行)middlehigh

对于 middle 难度的 我们直接先看源码 <?phpif( isset( $_POST[ Submit ] ) ) {// Get input$target $_REQUEST[ ip ];// Set blacklist$substitutions array(&& > ,; > ,);// Remove any of the characters in the array (blacklist).$target str_rep…

高防IP简介

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

Eclipse是如何创建web project项目的?

前面几篇描述先后描述了tomcat的目录结构和访问机制&#xff0c;以及Eclipse的项目类型和怎么调用jar包&#xff0c;还有java的main函数等&#xff0c;这些是一些基础问题&#xff0c;基础高清出来才更容易搞清楚后面要说的东西&#xff0c;也就是需求带动学习&#xff0c;后面…

udp丢包大文件传输解决方案

在现代企业的运作中&#xff0c;大容量文件的迅速传输变得极为关键。但是&#xff0c;UDP&#xff08;用户数据报协议&#xff09;在处理大型文件传输时常常遭遇数据包丢失的问题&#xff0c;这不仅影响了传输的效率&#xff0c;也可能对数据的完整性构成威胁。本文将深入分析U…

Qt网络编程——UDP

UDP UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一个轻量级的、不提供可靠性保证的、面向数据报的无连接协议&#xff0c;用于可靠性不是非常重要的情况。例如&#xff0c;传感器数据传输&#xff1a;一些传感器数据&#xff0c;如温度、…