前端axios发送请求如何导出excel文件?

// 导出方法
function down(){let reqUrl = import.meta.env.BASE_URL + '/api/AboutView/downLoad?aboutType=admin_temp';let _token = sessionStorage.get('token').replace(/\"/g, "");let xhr = new XMLHttpRequest();xhr.open("get", reqUrl, true);xhr.responseType = "blob";xhr.setRequestHeader("token", _token);xhr.onload = function () {if (xhr.status == 200) {let blob = new Blob([this.response], { type: 'application/vnd.ms-excel' });let a = document.createElement("a")let url = window.URL.createObjectURL(blob)a.href = urla.setAttribute('download', "模板下载")a.click()URL.revokeObjectURL(a.href)}}xhr.send();
}

1、reqUrl

// 创建请求路径
let reqUrl = import.meta.env.BASE_URL + '/api/AboutView/downLoad?aboutType=admin_temp';

import.meta.env.BASE_URL:项目的环境变量,也代表引用的基础URL

2、_token

// 获取token,并去除双引号
let _token = sessionStorage.get('token').replace(/\"/g, "");

3、xhr

// 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();

4、xhr.open

xhr.open("get", reqUrl, true);

打开一个请求

(1)"get":请求方法

(2)reqUrl:请求URL

(3)true:表示异步请求

5、xhr.responseType

// 设置响应类型为blob二进制流
xhr.responseType = "blob";

6、xhr.setRequestHeader

xhr.setRequestHeader("token", _token);

设置请求头

"token":判断是否已登录账号的标识

7、xhr.onload

xhr.onload = function () {if (xhr.status == 200) {let blob = new Blob([this.response], { type: 'application/vnd.ms-excel' });let a = document.createElement("a")let url = window.URL.createObjectURL(blob)a.href = urla.setAttribute('download', "模板下载")a.click() // 触发下载URL.revokeObjectURL(a.href)}
}

定义请求成功处理的事件

(1)blob

let blob = new Blob([this.response], { type: 'application/vnd.ms-excel' });

创建Blob对象,并指定其MIME类型为 application/vnd.ms-excel,表示该文件是一个Excel文件

(2)创建并配置下载链接

let a = document.createElement("a")  
let url = window.URL.createObjectURL(blob)  
a.href = url  
a.setAttribute('download', "模板下载")

①创建一个新的 <a> 元素

②使用 window.URL.createObjectURL 方法为Blob对象创建一个URL

③将这个URL设置为 <a> 元素的 href 属性

④使用 setAttribute 方法设置 download 属性,这样当链接被点击时,浏览器会提示用户下载文件,而不是尝试打开它

(3)a.click()触发下载

(4)URL.revokeObjectURL(a.href)

释放之前所创建的URL对象,可以释放浏览器资源

8、xhr.send()发起请求

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

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

相关文章

计算机网络 交换机的安全配置

一、理论知识 1.交换机端口安全功能介绍 交换机端口安全功能是针对交换机端口进行安全属性的配置&#xff0c;以控制用户的安全接入。主要包括以下两种配置项&#xff1a; ①限制交换机端口的最大连接数&#xff1a;控制交换机端口连接的主机数量&#xff1b;防止用户进行恶…

Java常用类--String类--上

String类 String类介绍 &#xff08;1&#xff09;创建的每个字符串实际上都是String类的对象。即使是字符串字面值实际上也是String对象。 &#xff08;2&#xff09;String类型的对象是不可变的&#xff1b;一旦创建了一个String对象&#xff0c;其内容就不能再改变。即&a…

【华为OD机试】Linux发行版的数量(C++ Java JavaScript Python )

题目 题目描述 Linux操作系统有多个发行版,distrowatch.com提供了各个发行版的资料。这些发行版互相存在关联,例如Ubuntu基于Debian开发,而Mint又基于Ubuntu开发,那么我们认为Mint同Debian也存在关联。 发行版集是一个或多个相关存在关联的操作系统发行版,集合内不包含没有…

kafka基础概念

目录 1、kafka简介 2、kafka使用场景 3、kafka基础概念 3.1、消息 3.1.1、消息构成详解 3.1.2、消息存储设计 3.2、topic 3.3、partition 3.4、offset 3.5、replication 3.5.1、replication简介 3.5.2、副本角色 3.5.3、副本类型 3.5.3.1、副本类型简介 3.5.3.2、…

30分钟学习如何搭建扩散模型的运行环境【pytorch版】【B站免费视频教程!】【解决环境搭建问题】

30分钟学习如何搭建扩散模型的运行环境【B站免费视频教程&#xff01;】【解决环境搭建问题】 动手学习扩散模型 点击以下链接即可进入学习&#xff1a; B站免费视频教程环境配置安装&#xff08;配套讲解文档&#xff09; 视频 讲解主要内容 一、环境设置 1.本地安装&…

用Python设置Excel工作表网格线的隐藏与显示

Excel表格界面的直观性很大程度上得益于表格中的网格线设计&#xff0c;这些线条帮助用户精确对齐数据&#xff0c;清晰划分单元格。网格线是Excel界面中默认显示的辅助线&#xff0c;用于辅助定位&#xff0c;与单元格边框不痛&#xff0c;不影响打印输出。然而&#xff0c;在…

fyne的对话框

对话框 import "fyne.io/fyne/v2/dialog"dialog包 定义了应用程序GUI的标准对话框窗口。 NewError NewError()为应用程序错误在指定的窗口上创建一个对话框。该消息是从提供的错误中提取的&#xff08;不应为nil&#xff09;。创建后&#xff0c;您应该调用Show()…

gpu测试渲染网站有哪些?免费GPU渲染平台介绍

GPU作为渲染领域的核心硬件&#xff0c;对于提高渲染速度和质量起着决定性作用。尽管购买高性能GPU的成本相对较高&#xff0c;但是通过GPU云渲染平台&#xff0c;用户可以以较低的成本享受到高效渲染服务的便利。现在&#xff0c;探索一些提供免费试用的GPU云渲染服务网站&…

深入理解DB2中的日志管理与监控:SYSIBMADM.LOG_UTILIZATION和SYSIBMADM.SNAPDB视图

深入理解DB2中的日志管理与监控&#xff1a;SYSIBMADM.LOG_UTILIZATION和SYSIBMADM.SNAPDB视图 DB2是一个强大的关系数据库管理系统&#xff0c;日志管理和监控是其运维管理的重要组成部分。本文将深入探讨两个关键的系统管理视图&#xff1a;SYSIBMADM.LOG_UTILIZATION 和 SY…

怎么查找企业的经营动态信息?

很多人都会查询企业的经营动态&#xff0c;比如很多投资者会关注企业的财务状况&#xff0c;市场战略&#xff0c;经营决策等信息&#xff1b;职场上也需要了解竞争对手和合作伙伴的相关经营动态&#xff0c;新品发布&#xff0c;技术专利申请等等。还有一些行业研究人员需要了…

Qt源码阅读笔记:初步了解QtCore模块目录结构

Qt框架是一个跨平台的C应用程序框架&#xff0c;广泛用于开发图形用户界面程序以及用于无界面后台操作的工具和服务器。它由多个模块组成&#xff0c;其中QtCore模块提供了核心的非GUI功能。 QtCore 提供了元对象系统&#xff0c;扩展了c 在元对象系统的基础上&#xff0c;qt又…

14、电科院FTU检测标准学习笔记-录波功能2

作者简介&#xff1a; 本人从事电力系统多年&#xff0c;岗位包含研发&#xff0c;测试&#xff0c;工程等&#xff0c;具有丰富的经验 在配电自动化验收测试以及电科院测试中&#xff0c;本人全程参与&#xff0c;积累了不少现场的经验 ———————————————————…

光猫BOB 功率调测误差分析与校验指南

DDM&#xff08;Digital Diagnostic Monitoring&#xff09;数字诊断监控技术&#xff0c;是光模块中使用的技术&#xff0c;以便用户能够监控光模块的实时参数。这些参数包括工作温度、工作电压、工作电流、发射和接收光功率等&#xff0c;还可以显示模块的常规波长、速率、传…

工控机和电脑一直ping不通

问题 工控机和电脑通过网线直连&#xff0c;电脑端是USB-网口转换器&#xff0c;一直互相ping不通&#xff0c;反复确认两端的IP地址、子网掩码及路由配置是对的。 原因 具体原因不明。 解决办法 但是通过将电脑端网卡的速度和模式属性由原来的“自动检测”修改为“100 Mb…

KaTeX数学公式语法手册

文章目录 基础数学符号根号与对数求和与积分矩阵与行列式特殊符号与希腊字母基本算术运算与分数上标与下标求和与积矩阵与向量括号与大括号微积分符号希腊字母特殊函数括号与大括号分段函数、案例与对齐层叠与叠加更多高级用法 借鉴的文档: KaTeX 支持大部分 LaTeX 数学模式中的…

iptables规则生成脚本

清除防火墙规则&#xff0c;以实际情况为准 iptables -F && iptables -X && iptables -Z 自动生成iptables规则脚本&#xff0c;针对于k8s的nodeport端口需要同时drop容器内端口和映射端口&#xff0c;同时如果k8s master集群是高可用需要3个节点都设置防火墙…

解决 pandas 读取 SQL Server 中的数据时,遇到 varchar 属性的中文字符显示乱码的问题(新)

通用解决办法&#xff08;通杀&#xff09; 读取SQL server中的数据 import pandas as pd from sqlalchemy import create_engine# 根据实际情况修改服务器地址、数据库名、用户名和密码 server your_server_address database your_database_name username your_username pa…

持续增强国产适配 | 宁盾身份域管与南大通用、飞腾完成产品兼容性认证

随着党政、央国企、金融信创国产化改造日益深入&#xff0c;企业对国产 IT 基础设施生态兼容适配的需求日益迫切。为践行给企业提供“开箱即用”的交付体验承诺&#xff0c;宁盾身份域管持续增强多元异构产品的兼容适配。近日&#xff0c;宁盾身份域管与天津南大通用数据技术股…

电子设备抗震等级与电子设备震动实验

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139923445 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…

solidworks安装教程 - 解决安装后服务不能自动启动问题

Solidworks安装教程&#xff0c;有些同学的电脑过于复杂&#xff0c;产生了正常的服务不能启动。 前面的有个重要的操作操作界面有&#xff0c;大家应该是执行了&#xff1a; 那么我们有变通的方法可以让这个服务启动&#xff1a; 1. cmd用管理员启动 2. 测试下如下命令是否…