使用xlsx完成纯前端导出！！ 并且支持多个sheet

工作中遇到的需求 以前都是文件流导出 （第一篇文章也有分享）第一次做 记录一下 希望能帮到各位同学

完成这个需求 首先我们需要引入一个库 叫做 xlsx

下载第三方库

npm insatll xlsx

然后引入 这里注意 直接复制 就这么写 不然 可能报错 module undefined

import * as XLSX from "xlsx/xlsx.mjs";

然后就是下面如何使用

同样 导出应是一个按钮触发导出 代码贴在下面

importFilesBtn() {
      console.log("触发导出");
      //导出数据 ： groupPackageTableData
      console.log(this.groupPackageTableData);
      //定义每一个sheet页面的数据
      //这里是要导出的表格数据
      const sheetDatas = this.groupPackageTableData;
      //拆解出多个sheet数据
      //循环 下载 每一个sheet页面都只有一条数据
      for (const i in sheetDatas) {
        const sheetData1 = [sheetDatas[i]].map((item) => ({
          分组ID: item.groupNo,
          分组名称: item.groupName,
          X套餐: item.isXGroup == false ? "否" : "是",
          性别: item.sex == 0 ? "不限" : "男" || item.sex == 1 ? "女" : "男",
          婚姻状况: item.maritalStatus == 1 ? "不限" : "不限",
          参检年龄: item.ageRange,
          服务等级: item.serviceLevel == 1 ? "普通" : "VIP",
          体检类型: item.peType == 1 ? "健康体检" : "团体体检",
          限额: item.unifiedCollectionLimit,
          套餐设置: item.packageSet,
        }));
        const sheet1 = XLSX.utils.json_to_sheet(sheetData1);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, sheet1, "sheet1");
        const workbookBlob = XLSX.writeFile(wb, "分组套餐表格.xlsx");
        // 导出最后的总表
        this.openDownloadDialog(workbookBlob, "sheet.xlsx");
      }
    },

这里是openDownloadDialog函数

openDownloadDialog(blob, fileName) {
      if (typeof blob == "object" && blob instanceof Blob) {
        blob = URL.createObjectURL(blob); // 创建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = blob;
      // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
      aLink.download = fileName || "";
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      //   移动端
      else {
        event = document.createEvent("MouseEvents");
        event.MouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    },

其实我试了 没有这个函数 一样会下载 感觉没什么影响 但是贴出来 给大家看一下 如果有大神知道可以私信我

好了 本次分享到这里 瑞思拜