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

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

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

    downloadFile(record) {
      let that = this
      let 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", // important
          withCredentials: 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("下载失败,请检查网络连接");
          });
      });
    },

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

相关文章:

  • 【Elasticsearch】运行时字段(Runtime Fields)索引时定义运行时字段
  • EtherNetIP转ModbusTCP网关,给风电注入“超级赛亚人”能量
  • flutter ListView 局部刷新
  • 相得益彰,Mendix AI connector 秒连DeepSeek ,实现研发制造域场景
  • 在WPS中通过JavaScript宏(JSA)调用本地DeepSeek API优化文档教程
  • Jenkins 新建配置 Freestyle project 任务 六
  • 力扣142题——环形链表II
  • 项目中菜单按照层级展示sql
  • 大疆无人机需要的kml文件如何制作kml导出(大疆KML文件)
  • 【微服务】SpringBoot 整合Redis Stack 构建本地向量数据库相似性查询
  • deepseek的CoT优势、两阶段训练的有效性学习笔记
  • Vulhub靶机 ActiveMQ任意 文件写入(CVE-2016-3088)(渗透测试详解)
  • oracle表分区--范围分区
  • 利用prompt技术结合大模型对目标B/S架构软件系统进行测试
  • 今日AI和商界事件(2025-02-14)
  • LC-搜索二维矩阵II、相交链表、反转链表、回文链表、环形链表、环形链表ll
  • STM32_USART通用同步/异步收发器
  • git bisect 使用二分法查找引入错误的提交
  • 软件工程完整大型课设--《颐养中心系统》 三级项目报告
  • 开关电源实战(一)宽范围DC降压模块MP4560
  • 全国台联原会长杨国庆逝世,享年89岁
  • 为治理商家“卷款跑路”“退卡难”,预付式消费司法解释5月起实施
  • 光明网评“泉州梦嘉商贸楼不到5年便成危楼”:监管是否尽职尽责?
  • 俄宣布停火三天,外交部:希望各方继续通过对话谈判解决危机
  • 北京动物园:大熊猫“萌兰”没有参加日本大阪世博会的计划
  • 我国将开展市场准入壁垒清理整治行动