前端导出EXCEL

步骤解析

定义了一个名为 excelDown 的函数,它接受两个参数:res 和 typeres 是包含响应数据的对象,type 是要导出的文件类型。如果 type 未提供,则默认使用 Excel 文件的 MIME 类型。

export const excelDown = (res, type) => {let typ = type || "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
}

 使用 Blob 构造函数创建了一个 Blob 对象。它接受一个包含响应数据的数组和一个配置对象作为参数。配置对象中的 typ 属性指定了 Blob 对象的 MIME 类型,用于指定要创建的文件类型。

  let blob = new Blob([res.data], {typ,});

从响应的头部中获取文件名。首先,它从 res.headers 对象中获取 content-disposition 头部字段的值,该字段通常包含有关文件的信息。然后,使用正则表达式 RegExp 对象匹配出文件名,并通过 decodeURI 对文件名进行解码,以便处理文件名中的特殊字符。

let contentDisposition = res.headers['content-disposition'];let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*');let result = patt.exec(contentDisposition);let thename = decodeURI(result[1]);

 创建一个 <a> 元素作为下载链接,并为其设置属性。首先,使用 document.createElement 方法创建一个 <a> 元素节点。然后,使用 window.URL.createObjectURL 方法为下载链接生成一个 URL,该 URL 将指向之前创建的 Blob 对象。最后,将生成的 URL 赋值给下载链接的 href 属性。

  let downloadElement = document.createElement('a');let href = window.URL.createObjectURL(blob); downloadElement.style.display = 'none';downloadElement.href = href;

 

设置下载链接的 download 属性为文件名,以便在点击下载时使用该文件名。然后,将下载链接添加到文档的 <body> 元素中,并通过调用 click() 方法触发点击事件,从而实现文件的下载。

  downloadElement.download = thename; document.body.appendChild(downloadElement);downloadElement.click();

在文件下载完成后进行清理操作。首先,从文档中移除下载链接节点,以便不再显示在页面上。然后,使用 window.URL.revokeObjectURL 方法释放占用的内存资源,以避免内存泄漏。

  document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href);

 以上就是代码每行的详细解释。它通过创建 Blob 对象和下载链接,实现了将 Excel 文件下载到客户端的功能。

完整代码

 

export const excelDown = (res, type) => {let typ = type || "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";let blob = new Blob([res.data], {typ,});//从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;let contentDisposition = res.headers['content-disposition']; let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*');let result = patt.exec(contentDisposition);let thename = decodeURI(result[1]); //使用decodeURI对名字进行解码//创建下载的链接let downloadElement = document.createElement('a');let href = window.URL.createObjectURL(blob); downloadElement.style.display = 'none';downloadElement.href = href;//下载后文件名downloadElement.download = thename; document.body.appendChild(downloadElement);downloadElement.click(); //点击下载//下载完成移除元素document.body.removeChild(downloadElement); //释放掉blob对象window.URL.revokeObjectURL(href); 
}

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

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

相关文章

unity导航网格无法烘培到台阶和斜坡

如图是我在b站学Unity导航网格时建的一个示例场景&#xff0c;本场景使用的为棱长1m的立方体&#xff0c;读者可以以此为参照度量其他物体大小。 可见导航网格根本无法烘焙到斜坡和台阶上&#xff0c;为解决问题我做了不少尝试&#xff0c;调整最大坡度和步高都没办法解决问题…

AI新纪元:可能的盈利之道

本文来源于Twitter大神宝玉&#xff08;dotey&#xff09;在聊 Sora 的时候&#xff0c;总结了 Sora 的价值和可能的盈利方向&#xff0c;我把这部分内容单独摘出来再整理一下。现在的生成式 AI 大家应该不陌生&#xff0c;用它总结文章、翻译、写作、画图&#xff0c;当然真正…

搭建私有Git服务器:GitLab部署详解

引言&#xff1a; 为了方便团队协作和代码管理&#xff0c;许多组织选择搭建自己的私有Git服务器。GitLab是一个集成了Git版本控制、项目管理、代码审查等功能的开源平台&#xff0c;是搭建私有Git服务器的理想选择。 目录 引言&#xff1a; 一、准备工作 在开始部署GitLab之…

Dockerfile和jar包不同目录处理

如果Dockerfile的全路径为/srm/myDockerfile/Dockerfile&#xff0c;而JAR文件位于/srm目录下&#xff0c;你可以在Dockerfile中使用相对路径引用JAR文件。以下是如何编写Dockerfile的示例&#xff1a; 假设你的项目结构如下&#xff1a; luaCopy code /srm |-- myDockerfile …

Map集合的遍历方式

遍历Map集合的几种方式 迭代器(Iterator)forlambdaStream 代码示例 package com.haimeng.Array;import java.security.Key; import java.util.HashMap; import java.util.Iterator; import java.util.Map;public class Lambda1 {public static void main(String[] args) {//…

MySQL数据库基础(十五):PyMySQL使用介绍

文章目录 PyMySQL使用介绍 一、为什么要学习PyMySQL 二、安装PyMySQL模块 三、PyMySQL的使用 1、导入 pymysql 包 2、创建连接对象 3、获取游标对象 4、pymysql完成数据的查询操作 5、pymysql完成对数据的增删改 PyMySQL使用介绍 提前安装MySQL数据库&#xff08;可以…

shell脚本介绍及基本功能

目录 1. 什么是shell 2. hello word 2.1 echo 2.2 第一个脚本 3. Bash的基本功能 3.1别名 3.2 常用快捷键 3.3 输入输出 3.4 输出重定向 3.5 多命令执行 3.6 管道符 3.7 通配符和特殊符号 1. 什么是shell Shell 是一个用 C 语言编写的程序&#xff0c;它是用户使用…

数据分析---常见处理逻辑

目录 数据清洗数据转换数据聚合数据筛选增删改查(以查为例)数据清洗 去除重复值:使用DISTINCT关键字去除重复行。//这将返回一个包含所有不重复城市的结果集 SELECT DISTINCT city FROM students;处理缺失值:使用IS NULL或IS NOT NULL判断是否为空值,并使用COALESCE或CASE…

STM32--低功耗模式详解

一、PWR简介 正常模式与睡眠模式耗电是mA级&#xff0c;停机模式与待机模式是uA级。 二、电源框图 供电区域有三处&#xff0c;分别是模拟部分供电&#xff08;VDDA&#xff09;&#xff0c;数字部分供电&#xff0c;包括VDD供电区域和1.8V供电区域&#xff0c;后备供电&…

mysql和redis双写一致性策略分析

mysql和redis双写一致性策略分析 一.什么是双写一致性 当我们更新了mysql中的数据后也可以同时保证redis中的数据同步更新&#xff1b; 数据读取的流程&#xff1a; 1.读取redis,如果value!null,直接返回&#xff1b; 2.如果redis中valuenull&#xff0c;读取mysql中数据对应的…

【程序员养生延寿系列-万人关注的养生指南】

一.程序员面临的健康问题 应该说不只程序员&#xff0c;大部分互联网从业者&#xff0c;都会遇到很多类似的健康问题&#xff0c;比如&#xff1a; 心理压力大&#xff0c;失眠长期加班久坐不动熬夜&#xff0c;甚至通宵作息不规律饮食不均衡 短期可能不会表现出来&#xff…

MMDetection3D v1.1.0安装教程

MMDetection3D v1.1.0安装 1. 系统环境2. 安装2.1 基本环境安装2.2 验证2.3 安装MinkowskiEngine和TorchSparse 3. 最终环境配置 根据 v1.1.0版本官方手册&#xff0c;测试后的安装配置&#xff0c;亲测可行 1. 系统环境 项目版本日期Ubuntu18.04.06 LTS-显卡RTX 2070-显卡驱…

Leaflet-学习

一、官网 英文官网&#xff1a;Leaflet 中文官网&#xff1a;Leaflet 二、介绍 Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有39 KB, 并且拥有绝大部分开发者所需要的所有地图特性。 Leaflet 简单、高效并且易用。 它可以高效的运行在桌…

uni-app原生api的promise化以解决异步等待问题分析

相信各位在进行uni-app开发的时候会遇到各种关于异步回调问题&#xff0c;例如要传code给后端以换取session_key&#xff0c;在这之前需要先调用 uni.login&#xff0c;所以执行的顺序是必须同步等待的。在写这篇文章之前对于整体的流程概念需要做一个梳理&#xff0c;以便能更…

SSMBUG之 url +

1. Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured. 经查, 书写一切正常. 注意到此时yml文件的图标是一个红色的Y而不是绿色的spring , 推测没有正确加载. 重新创建项目, 所有东西拷贝一份便恢复正常…

猫头虎分享已解决Bug || AttributeError: ‘Sequential‘ object has no attribute ‘session‘

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

MySQL报错:sql_mode=only_full_group_by解决方法

Linux环境 ubuntu 22.04 MySQL是8.0.35版本 问题描述 Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column auth_system.t_class_temp_config.id which is not functionally dependent on columns in GROUP BY clause; this is inco…

Kubernetes基础(二十六)-kubernetes的eviction机制

eviction&#xff0c;即驱赶的意思&#xff0c;意思是当节点出现异常时&#xff0c;kubernetes将有相应的机制驱赶该节点上的Pod。eviction在openstack的nova组件中也存在。 目前kubernetes中存在两种eviction机制&#xff0c;分别由kube-controller-manager和kubelet实现。 …

Delphi之后的接班人?国产可视化编程工具重塑经典

Delphi&#xff0c;这个名字对于许多80后的程序员来说&#xff0c;无疑是一种深深的情怀。它曾是可视化编程的王者&#xff0c;承载着无数开发者的青春记忆。 在Pascal语言盛行的年代&#xff0c;Delphi以其独特的魅力&#xff0c;迅速在编程界崭露头角。当时流传着这样一句话&…

Java实现公司货物订单管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 客户管理模块2.2 商品维护模块2.3 供应商管理模块2.4 订单管理模块 三、系统展示四、核心代码4.1 查询供应商信息4.2 新增商品信息4.3 查询客户信息4.4 新增订单信息4.5 添加跟进子订单 五、免责说明 一、摘要 1.1 项目…