vue 文件下载(导出)excel的方法

devtools/2025/2/18 21:49:37/

目前有一个到处功能的需求,这是我用过DeepSeek生成的导出(下载)excel的一个方法。
1.excel的文件名是后端生成的,放在了响应头那里。
2.这里也可以自己制定文件名。
3.axios用的是原生的axios,不要用处理过的,有拦截等等。

    downloadFile(record) {let that = thislet apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";return new Promise((resolve, reject) => {axios({url: apiBaseUrl + `/ABC/ABC?id=${record.id}&date=${record.monthTime}`,method: "GET",responseType: "blob", // importantwithCredentials: true,headers: {"X-Access-Token": Vue.ls.get(ACCESS_TOKEN),},}).then((response) => {// 处理blob响应const blob = new Blob([response.data]);const contentDisposition = response.headers["content-disposition"];// 错误处理:当响应是JSON时说明出错if (blob.type === "application/json") {const reader = new FileReader();reader.onload = () => {try {const errData = JSON.parse(reader.result);reject(errData.message || "导出失败");that.$message.error(errData.message || "导出失败");} catch (e) {reject("导出失败");that.$message.error("导出失败");}};reader.readAsText(blob);return;}// 创建下载链接const downloadUrl = window.URL.createObjectURL(blob);const link = document.createElement("a");link.href = downloadUrl;let fileName = "";if (contentDisposition) {const fileNameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;const matches = fileNameRegex.exec(contentDisposition);if (matches && matches[1]) {fileName = matches[1].replace(/['"]/g, "");fileName = decodeURIComponent(fileName);// 我这里文件名的前缀有 utf-8 所以在这里做了一个处理,如果没有,则可以注释这里fileName = fileName.replace(/^utf-8['"]?/, "");}}link.download = fileName || `export_${new Date().getTime()}.xlsx`;// 触发下载document.body.appendChild(link);link.click();// 清理资源window.URL.revokeObjectURL(downloadUrl);document.body.removeChild(link);resolve();}).catch((error) => {reject(error);that.$message.error("下载失败,请检查网络连接");});});},

其实这个通用的方法,基本可以实现所需的要求。


http://www.ppmy.cn/devtools/159158.html

相关文章

【Azure 架构师学习笔记】- Azure Databricks (11) -- UC搭建

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 接上文 【Azure 架构师学习笔记】- Azure Databricks (10) – UC 使用 前言 由于ADB 的更新速度很快,在几个月之后重新搭建ADB 时发现UC 已经更新了很多,为了后续做ADB 的功…

PostgreSQL 数据库压力测试指南

一、为什么需要压力测试? 数据库需要进行压力测试的原因主要包括以下几个方面: 性能评估:通过压力测试,可以了解数据库在高负载情况下的性能表现,包括响应时间、吞吐量和资源利用率等。这有助于确定系统的性能瓶颈。 …

3.1 严格Stubbing模式

严格Stubbing(Strict Stubbing)是Mockito提供的一种增强测试严谨性的模式,旨在检测以下问题: 多余的Stubbing:配置了未被调用的方法桩。不必要的Stubbing:Stubbing未被使用且不影响测试结果。桩顺序错误&a…

游戏APP如何通过精准广告策略实现广告变现收益增长?

不同类型的游戏APP合作AdSet聚合广告平台,量身定制广告变现方案,以提升变现收益的表现。#app广告变现 1、智能选择广告形式 基于用户的行为习惯,推荐优化广告格式,包括插屏广告、激励视频广告和Banner广告等,最大化广…

【javascript】录音可视化

文章目录 前言一、音频数据格式1. 常见的数据格式 二、获取音频方式1. 用FileReader对象读取音频文件2. 通过url请求获取音频数据3. 录音获取音频流 三、音频格式转换四、音频可视化总结 前言 分享一些在开发语音识别功能遇到的问题和解决方法,包含音频数据格式转换…

Linux入侵检查流程

1. 初步信息收集 1.1 系统信息 • 目的:了解当前系统的基本情况,包括操作系统版本、内核版本等。 • 命令: # 查看操作系统发行版信息 cat /etc/os-release # 查看内核版本 uname -r 1.2 网络信息 • 目的:查看网络连接状态、…

【LeetCode: 1552. 两球之间的磁力 + 二分】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

QT笔记——QRadioButton

文章目录 1、概要2、实际的应用2.1、创建多个QRadioButton,只可同时选中其中一个,点击后实现对应的槽函数 1、概要 实现QRadioButton相关的应用;2、实际的应用 2.1、创建多个QRadioButton,只可同时选中其中一个,点击后实现对应的槽函数 创建…