导出的使用

一.导出的具体使用步骤

1.在web开发中，导出是很常见的一个功能，当我举行个人项目练习的时候，导出的时候无法控制列宽以及居中样式，后续发现导出插件无法举行修改，整个插件较为简便易懂的同时，对于EX的控制较为简陋，许多东西并不能设置，根据我的搜刮，更改为ExcelJS插件来控制样式以及列宽，停止于现在
引用方式

1.   <script src="https://cdn.jsdelivr.net/npm/
2. [email protected]/dist/exceljs.min.js"></script>

复制代码

来得到对应的方法进利用用
2.在实现导出功能之前，我们需要对一些配置举行初始化。下面是配置对象的内容，其中包罗了导出字段、表头映射、状态映射和样式配置等：

1. // 导出配置
2. const exportConfig = {
3.   // 选择导出的字段路径
4.   selectedHeaders: [
5.     "id",
6.     "user.nickname",
7.     "card",
8.     "tel",
9.     "depart.name",
10.     "doctor_name",
11.     "money",
12.     "status",
13.     "visit_status",
14.     "order_code",
15.     "create_time",
16.     "yes_time",
17.   ],
19.   // 表头映射关系
20.   customHeaders: {
21.     id: "订单ID",
22.     "user.nickname": "就诊人",
23.     card: "就诊卡号",
24.     tel: "手机号",
25.     "depart.name": "挂号科室",
26.     doctor_name: "医生姓名",
27.     money: "支付金额",
28.     status: "缴费状态",
29.     visit_status: "就诊状态",
30.     order_code: "订单号",
31.     create_time: "创建时间",
32.     yes_time: "最后缴费时间",
33.   },
35.   // 状态映射配置
36.   statusMappings: {
37.     status: {
38.       2: "欠费",
39.       1: "缴费完成",
40.       null: "未知",
41.       undefined: "未知",
42.     },
43.     visit_status: {
44.       2: "就诊中",
45.       1: "就诊完成",
46.       null: "未知",
47.       undefined: "未知",
48.     },
49.   },
51.   // 样式配置
52.   columnWidth: 18,
53.   styles: {
54.     header: {
55.       fill: {
56.         type: "pattern",
57.         pattern: "solid",
58.         fgColor: { argb: "FFD3D3D3" },
59.       },
60.       font: {
61.         bold: true,
62.         name: "微软雅黑",
63.         size: 12,
64.       },
65.       alignment: {
66.         vertical: "middle",
67.         horizontal: "center",
68.       },
69.     },
70.     body: {
71.       font: {
72.         name: "微软雅黑",
73.         size: 11,
74.       },
75.       alignment: {
76.         vertical: "middle",
77.         horizontal: "center",
78.       },
79.     },
80.   },
81. };

复制代码

• selectedHeaders: 这是一个包含了需要导出的字段路径的数组。每个路径指向数据对象中的一个字段，可以是嵌套的字段（比方："user.nickname"）。
  
• customHeaders: 这是字段的映射，用于将字段路径映射到Excel表格中的实际表头名称。
  
• statusMappings: 配置字段状态的映射，如"缴费状态"和"就诊状态"的数值映射为具体的状态形貌。
  
• styles: 设置Excel表格的样式，如字体、对齐方式、填充色等。
  

二.工具函数

为了从数据源中提取嵌套值，我们编写了以下工具函数：
getNestedValue

该函数用于从对象中根据路径提取嵌套的值：

1. function getNestedValue(obj, path) {
2.   return path.split(".").reduce((acc, key) => {
3.     if (acc === null || acc === undefined) return undefined;
4.     return acc[key];
5.   }, obj);
6. }

复制代码

formatDate

该函数将时间戳转换为易读的日期格式：

1. function formatDate(timestamp) {
2.   if (!timestamp) return "未知时间";
3.   const date = new Date(timestamp);
4.   return `${date.getFullYear()}-${(date.getMonth() + 1)
5.     .toString()
6.     .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
7.     .getHours()
8.     .toString()
9.     .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
10. }

复制代码

三.数据处理与Excel生成

在数据导出的核心函数exportData中，我们首先对数据源举行有效性查抄和预处理。数据的每一项都会通过配置举行映射和处理，特别是数字格式、日期格式和状态映射。

1. async function exportData(dataSource) {
2.   try {
3.     if (!dataSource || !Array.isArray(dataSource)) {
4.       throw new Error("无效的数据源");
5.     }
6.     if (dataSource.length === 0) {
7.       showAlerts(".ErrorModal", "5%", "警告：没有可导出的数据");
8.       return;
9.     }
11.     const processedData = dataSource.map((item) => {
12.       const rowData = {};
13.       exportConfig.selectedHeaders.forEach((fieldPath) => {
14.         const displayName = exportConfig.customHeaders[fieldPath];
15.         let rawValue = getNestedValue(item, fieldPath);
17.         // 状态映射处理
18.         if (exportConfig.statusMappings[fieldPath]) {
19.           rawValue =
20.             exportConfig.statusMappings[fieldPath][rawValue] ?? "未知状态";
21.         }
23.         // 特殊字段处理
24.         if (fieldPath === "money") {
25.           const numericString = String(rawValue).replace(/[^0-9.]/g, "");
26.           const numericValue = parseFloat(numericString);
27.           if (!isNaN(numericValue) && isFinite(numericValue)) {
28.             rawValue = numericValue;
29.           } else {
30.             rawValue = "金额异常";
31.             showAlerts(".ErrorModal", "5%", "金额异常");
32.           }
33.         }
35.         if (["create_time", "yes_time"].includes(fieldPath)) {
36.           rawValue = formatDate(rawValue);
37.         }
39.         // 默认空值处理
40.         if ([null, undefined, ""].includes(rawValue)) {
41.           rawValue = fieldPath.includes("time") ? "时间未记录" : "未知";
42.         }
44.         rowData[displayName] = rawValue;
45.       });
47.       return rowData;
48.     });
50.     // 创建Excel工作簿
51.     const workbook = new ExcelJS.Workbook();
52.     const worksheet = workbook.addWorksheet("门诊缴费记录", {
53.       properties: { tabColor: { argb: "FF00FF00" } },
54.     });
56.     // 添加表头
57.     const headers = Object.values(exportConfig.customHeaders);
58.     const headerRow = worksheet.addRow(headers);
59.     headerRow.eachCell((cell) => {
60.       cell.style = exportConfig.styles.header;
61.     });
63.     // 添加数据行
64.     processedData.forEach((dataItem) => {
65.       const rowValues = headers.map((header) => dataItem[header]);
66.       const dataRow = worksheet.addRow(rowValues);
67.       dataRow.eachCell((cell) => {
68.         cell.style = exportConfig.styles.body;
69.       });
70.     });
72.     // 设置列宽
73.     worksheet.columns = headers.map(() => ({
74.       width: 20,
75.       style: { numFmt: "@" },
76.     }));
78.     // 生成文件
79.     const buffer = await workbook.xlsx.writeBuffer();
80.     const blob = new Blob([buffer], {
81.       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
82.     });
84.     const downloadLink = document.createElement("a");
85.     downloadLink.href = URL.createObjectURL(blob);
86.     downloadLink.download = `门诊缴费记录_${new Date().toISOString().slice(0, 10)}_${hours}:${minutes}:${seconds}.xlsx`;
87.     document.body.appendChild(downloadLink);
88.     downloadLink.click();
90.     // 清理资源
91.     setTimeout(() => {
92.       URL.revokeObjectURL(downloadLink.href);
93.       downloadLink.remove();
94.     }, 1000);
95.   } catch (error) {
96.     console.error("导出过程中发生错误:", error);
97.     alert(`导出失败: ${error.message}`);
98.   }
99. }

复制代码

核心步骤

• 数据预处理: 根据配置映射数据字段，并处理特殊字段（如金额、日期等）。
  
• Excel生成: 使用ExcelJS创建工作簿，并设置表头和数据行的样式。
  
• 导出功能: 生成Excel文件并通过Blob触发下载。
  

四.用户交互与事件处理

在页面交互中，我们提供了全选、反选和导出选中项/全部数据的功能。用户可以根据需求选择需要导出的数据，或选择导出全部数据。
事件处理代码

1. $(document).ready(function () {
2.   $(".select-all").on("change", function () {
3.     $(".row-checkbox").prop("checked", this.checked);
4.   });
6.   $(".choice_export").on("click", async function () {
7.     const selectedIndexes = $(".notice .checkbox_id input:checked")
8.       .map(function () {
9.         return $(this).attr("dataIndex");
10.       })
11.       .get();
13.     if (selectedIndexes.length === 0) {
14.       showAlerts(".ErrorModal", "5%", "请至少选择一条有效记录");
15.       return;
16.     }
18.     try {
19.       const selectedData = globalData.filter((item) =>
20.         selectedIndexes.includes(item.id.toString())
21.       );
22.       await exportData(selectedData);
23.       showAlerts(".correctModal", "5%", `成功导出 ${selectedData.length} 条数据`, "success");
24.     } catch (error) {
25.       showAlerts(".ErrorModal", "5%", `导出失败: ${error.message}`, "error");
26.     }
27.   });
29.   $(".all_export").on("click", async function () {
30.     if (!globalData || globalData.length === 0) {
31.       showAlerts(".ErrorModal", "5%", "当前没有可导出的数据");
32.       return;
33.     }
35.     try {
36.       await exportData(globalData);
37.       showAlerts(".correctModal", "5%", "成功导出全部数据");
38.     } catch (error) {
39.       showAlerts(".ErrorModal", "5%", `导出失败: ${error.message}`, "error");
40.     }
41.   });
42. });

复制代码

总结

本文介绍了怎样使用ExcelJS库举行数据导出，涵盖了怎样处理数据映射、设置自定义表头、实现状态映射、格式化日期和金额、以及怎样生成和下载Excel文件。通过这些步骤，你可以轻松实现复杂的Excel导出功能，并根据差别的业务需求举行调解和扩展。