当前位置: 首页 > news >正文

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

目前有一个到处功能的需求,这是我用过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.lryc.cn/news/538840.html

相关文章:

  • 【第4章:循环神经网络(RNN)与长短时记忆网络(LSTM)— 4.3 RNN与LSTM在自然语言处理中的应用案例】
  • LLMs Ollama
  • Blackbox.AI:高效智能的生产力工具新选择
  • 计算机专业知识【 轻松理解数据库四大运算:笛卡尔积、选择、投影与连接】
  • C/C++字符串格式化全解析:从printf到std::format的安全演进与实战指南
  • 【C++】stack 和 queue 的适配器模式与实现
  • 【python】You-Get
  • PHP基础部分
  • gitee SSH 公钥设置教程
  • Java零基础入门笔记:(3)程序控制
  • 鸡兔同笼问题
  • 【Pytorch 库】自定义数据集相关的类
  • electron打包基本教程
  • 实现pytorch注意力机制-one demo
  • 深入Flask:如何优雅地处理HTTP请求与响应
  • JVM ②-双亲委派模型 || 垃圾回收GC
  • jQuery介绍(快速、简洁JavaScript库,诞生于2006年,主要目标是简化HTML文档操作、事件处理、动画和Ajax交互)
  • python旅游推荐系统+爬虫+可视化(协同过滤算法)
  • Ubuntu 22.04.5 LTS 安装企业微信,(2025-02-17安装可行)
  • 【Excel笔记_6】条件格式和自定义格式设置表中数值超过100保留1位,超过1000保留0位,低于100为默认
  • UDP与TCP
  • Web开发技术概述
  • 解压rar格式的软件有哪些?8种方法(Win/Mac/手机/网页端)
  • uniapp开发:首次进入 App 弹出隐私协议窗口
  • 执行pnpm run dev报错:node:events:491 throw er; // Unhandled ‘error‘ event的解决方案
  • OpenCV机器学习(4)k-近邻算法(k-Nearest Neighbors, KNN)cv::ml::KNearest类
  • JVM中的线程池详解:原理→实践
  • SNARKs 和 UTXO链的未来
  • JavaScript设计模式 -- 外观模式
  • 百达翡丽(Patek Philippe):瑞士制表的巅峰之作(中英双语)