export-to-exceljs-util 1.0.4 → 1.0.6

package/README.md

@@ -15,11 +15,13 @@
 ```bash
 npm i export-to-exceljs-util
 ```
+
 使用 yarn 安装：
 
 ```bash
 yarn add export-to-exceljs-util
 ```
+
 ### 代码示例
 
 ```javascript
@@ -29,7 +31,16 @@ import ExcelExporter from "export-to-exceljs-util";
 const columns = [
   {
     title: "姓名",
-    key: "name",
+    children: [
+      {
+        title: "姓",
+        key: "first_name",
+      },
+      {
+        title: "名",
+        key: "last_name",
+      },
+    ],
   },
   {
     title: "年龄",
@@ -54,7 +65,7 @@ const data = [
 const fileName = "测试数据.xlsx";
 
 // 其他信息（可选）
-const otherInfo = [];
+const otherInfo = null;
 
 // 创建 Excel 导出实例
 const excelExporter = new ExcelExporter(columns, data, fileName, otherInfo);
@@ -62,3 +73,9 @@ const excelExporter = new ExcelExporter(columns, data, fileName, otherInfo);
 // 执行导出操作
 excelExporter.exportToExcel();
 ```
+
+### 注意事项
+
+- data 数组的每一项必须包含与 columns 数组中相同的 key。
+- 当时数据量大于1w行时，工具类ExcelExporter参数属性必须是可被复制的,比如示例中的columns,data中的属性都是简单的数字、字符串、布尔值等,如使用vue3的ref声明的对象,需要使用toRaw()方法转换为普通对象,否则会报错。
+- 此工具类未压缩代码，需要自定义样式的开发者可以自提代码进行修改。

package/defaultExport.js

@@ -179,14 +179,14 @@ export default class DefaultExport {
   }
 
   generateDescribe(worksheet) {
-    if (this.describe.length > 0) {
+    if (this.describe) {
       // 定义开始的位置
       const startCell = this.data.length + 7;
-      const endCell = startCell + this.describe.length + 9;
+      const endCell = startCell  + 9;
       worksheet.mergeCells(`A${startCell}:E${endCell}`);
 
       // 在表格底部加上文字解释
-      let combinedText = this.describe.join("\n");
+      let combinedText = this.describe;
       const mergedCells = [
         `A${startCell}`,
         `B${startCell}`,

package/index.js

@@ -1,9 +1,9 @@
 import { saveAs } from "file-saver";
-import { retainTitleAndKey } from "./utils/index";
+import { retainTitleAndKey } from './utils/index.js'
 import DefaultExport from "./defaultExport.js";
 
 class ExcelExporter {
-  constructor(columns, data, filename = "export.xlsx", describe = []) {
+  constructor(columns, data, filename = "导出数据.xlsx", describe = []) {
     this.columns = columns;
     this.data = data;
     this.filename = filename;
@@ -22,9 +22,217 @@ class ExcelExporter {
     }
   }
 
+  // Web Worker 脚本代码存储在变量 workerScript 中
   async exportLargeDataSet() {
+    const workerScript = `
+        importScripts("https://cdn.bootcdn.net/ajax/libs/exceljs/4.4.0/exceljs.min.js");
+        const fontStyle = {
+            name: "Arial",
+            size: 10,
+            bold: true, // 设置文字加粗
+            color: { argb: "FF000000" },
+          };
+          const alignmentStyle = (vertical = "middle", horizontal = "center") => {
+            return {
+              vertical,
+              horizontal,
+            };
+          };
+          
+          const borderStyle = {
+            top: { style: "thin" },
+            left: { style: "thin" },
+            bottom: { style: "thin" },
+            right: { style: "thin" },
+          };
+          
+          function generateHeaders(
+            worksheet,
+            columns,
+            rowIndex = 1,
+            colIndexStart = 1,
+            maxDepth = null
+          ) {
+            let maxRowIndex = rowIndex;
+            let colIndex = colIndexStart;
+          
+            // 计算整个表头的最大深度（用于单级表头行合并）
+            if (maxDepth === null) {
+              maxDepth = getMaxDepth(columns);
+            }
+          
+            columns.forEach((column) => {
+              const currentRowIndex = rowIndex;
+              const currentColIndex = colIndex;
+          
+              // 计算列的跨度和行的跨度
+              const colSpan = getColSpan(column);
+              const rowSpan = getRowSpan(column, maxDepth - rowIndex + 1);
+          
+              // 设置表头单元格值并应用样式
+              const cell = worksheet.getCell(currentRowIndex, currentColIndex);
+              cell.value = column.title;
+              cell.alignment = alignmentStyle();
+              cell.border = borderStyle;
+              cell.font = fontStyle;
+              cell.fill = {
+                type: "pattern",
+                pattern: "solid",
+                fgColor: { argb: "87CEEB" },
+              };
+          
+              // 合并单元格处理
+              if (colSpan > 1) {
+                worksheet.mergeCells(
+                  currentRowIndex,
+                  currentColIndex,
+                  currentRowIndex,
+                  currentColIndex + colSpan - 1
+                );
+              }
+          
+              // 处理跨行合并的情况
+              if (rowSpan > 1) {
+                worksheet.mergeCells(
+                  currentRowIndex,
+                  currentColIndex,
+                  currentRowIndex + rowSpan - 1,
+                  currentColIndex
+                );
+              }
+          
+              // 处理子列
+              if (column.children && column.children.length > 0) {
+                const childMaxRowIndex = generateHeaders(
+                  worksheet,
+                  column.children,
+                  currentRowIndex + 1,
+                  currentColIndex,
+                  maxDepth
+                );
+                maxRowIndex = Math.max(maxRowIndex, childMaxRowIndex);
+              } else {
+                maxRowIndex = Math.max(maxRowIndex, currentRowIndex + rowSpan - 1);
+              }
+          
+              colIndex += colSpan;
+            });
+          
+            return maxRowIndex;
+          }
+          
+          function getColSpan(column) {
+            if (!column.children || column.children.length === 0) {
+              return 1;
+            }
+            return column.children.reduce((sum, child) => sum + getColSpan(child), 0);
+          }
+          
+          function getRowSpan(column, remainingDepth) {
+            if (!column.children || column.children.length === 0) {
+              return remainingDepth;
+            }
+            return 1;
+          }
+          
+          function getMaxDepth(columns) {
+            return columns.reduce((max, column) => {
+              const depth = column.children ? 1 + getMaxDepth(column.children) : 1;
+              return Math.max(max, depth);
+            }, 1);
+          }
+          
+          function fillData(worksheet, data, columns) {
+            data.forEach((rowData) => {
+              const row = worksheet.addRow(
+                columns.flatMap((col) => extractValues(rowData, col))
+              );
+              row.eachCell((cell) => {
+                cell.alignment = alignmentStyle();
+              });
+            });
+          }
+          
+          function autoFitColumns(worksheet) {
+            worksheet.columns.forEach((column) => {
+              let maxLength = 0;
+              column.eachCell({ includeEmpty: true }, (cell) => {
+                const columnLength = cell.value ? cell.value.toString().length : 10;
+                if (columnLength > maxLength) {
+                  maxLength = columnLength;
+                }
+              });
+              column.width = maxLength < 10 ? maxLength + 5 : maxLength;
+            });
+          }
+          
+          function generateDescribe(worksheet, describe, data) {
+            if (describe) {
+              console.log('describe',describe);
+              // 定义开始的位置
+              const startCell = data.length + 7;
+              const endCell = startCell + 9;
+          
+              // 合并单元格的范围
+              const mergeStart = 'A' + startCell;
+              const mergeEnd = 'E' + endCell;
+              worksheet.mergeCells(mergeStart + ':' + mergeEnd);
+          
+              // 在表格底部加上文字解释
+              let combinedText = describe
+              const mergedCells = [
+                'A' + startCell,
+                'B' + startCell,
+                'C' + startCell,
+                'D' + startCell,
+                'E' + startCell,
+              ];
+          
+              // 设置每个合并单元格的自动换行属性
+              mergedCells.forEach(function(cell) {
+                const currentCell = worksheet.getCell(cell);
+                currentCell.value = combinedText;
+                currentCell.font = fontStyle;
+                currentCell.alignment = {
+                  vertical: "top",
+                  horizontal: "left",
+                  wrapText: true // 设置自动换行
+                };
+              });
+              worksheet.getCell(mergeStart).border = borderStyle;
+            }
+          }
+          
+          function extractValues(rowData, column) {
+            if (column.children && column.children.length > 0) {
+              return column.children.flatMap((child) => extractValues(rowData, child));
+            } else {
+              return [rowData[column.key]];
+            }
+          }
+        self.onmessage = async function (e) {
+        const { data, columns, describe, filename } = e.data;
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet("Sheet1");
+        generateHeaders(worksheet, columns);
+        fillData(worksheet, data, columns);
+        generateDescribe(worksheet, describe, data);
+        const buffer = await workbook.xlsx.writeBuffer();
+        self.postMessage({ buffer, filename });
+    };`;
+
+    // 创建 Blob 对象
+    const blob = new Blob([workerScript], { type: "text/javascript" });
+
+    // 创建指向 Blob 的 URL
+    const workerUrl = URL.createObjectURL(blob);
+
+    // 创建 Web Worker 实例
+    const writeBufferWorker = new Worker(workerUrl);
+
+    // 剩余的代码与代码2相同
+
     const formatColumns = retainTitleAndKey(this.columns);
-    const writeBufferWorker = new Worker("/writeBufferWorker.js");
     writeBufferWorker.postMessage({
       columns: formatColumns,
       data: this.data,
@@ -36,6 +244,12 @@ class ExcelExporter {
       const { buffer, filename } = e.data;
       const blob = new Blob([buffer], { type: "application/octet-stream" });
       saveAs(blob, filename);
+
+      // 释放对象 URL
+      URL.revokeObjectURL(workerUrl);
+
+      // 终止 Web Worker
+      writeBufferWorker.terminate();
     };
 
     writeBufferWorker.onerror = (error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "export-to-exceljs-util",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "使用exceljs导出excel文件",
   "main": "index.js",
   "scripts": {

package/public/writeBufferWorker.js

@@ -1,200 +0,0 @@
-importScripts("https://cdn.bootcdn.net/ajax/libs/exceljs/4.4.0/exceljs.min.js");
-
-self.onmessage = async function (e) {
-  const { data, columns, describe, filename } = e.data;
-  const workbook = new ExcelJS.Workbook();
-  const worksheet = workbook.addWorksheet("Sheet1");
-  // 设置表头样式
-  generateHeaders(worksheet, columns);
-
-  // 填充数据
-  fillData(worksheet, data, columns);
-
-  // 自动调整列宽
-  // autoFitColumns(worksheet);
-
-  // 处理描述信息
-  generateDescribe(worksheet, describe, data);
-
-  const buffer = await workbook.xlsx.writeBuffer();
-  self.postMessage({ buffer, filename });
-};
-const fontStyle = {
-  name: "Arial",
-  size: 10,
-  bold: true, // 设置文字加粗
-  color: { argb: "FF000000" },
-};
-const alignmentStyle = (vertical = "middle", horizontal = "center") => {
-  return {
-    vertical,
-    horizontal,
-  };
-};
-
-const borderStyle = {
-  top: { style: "thin" },
-  left: { style: "thin" },
-  bottom: { style: "thin" },
-  right: { style: "thin" },
-};
-
-function generateHeaders(
-  worksheet,
-  columns,
-  rowIndex = 1,
-  colIndexStart = 1,
-  maxDepth = null
-) {
-  let maxRowIndex = rowIndex;
-  let colIndex = colIndexStart;
-
-  // 计算整个表头的最大深度（用于单级表头行合并）
-  if (maxDepth === null) {
-    maxDepth = getMaxDepth(columns);
-  }
-
-  columns.forEach((column) => {
-    const currentRowIndex = rowIndex;
-    const currentColIndex = colIndex;
-
-    // 计算列的跨度和行的跨度
-    const colSpan = getColSpan(column);
-    const rowSpan = getRowSpan(column, maxDepth - rowIndex + 1);
-
-    // 设置表头单元格值并应用样式
-    const cell = worksheet.getCell(currentRowIndex, currentColIndex);
-    cell.value = column.title;
-    cell.alignment = alignmentStyle();
-    cell.border = borderStyle;
-    cell.font = fontStyle;
-    cell.fill = {
-      type: "pattern",
-      pattern: "solid",
-      fgColor: { argb: "87CEEB" },
-    };
-
-    // 合并单元格处理
-    if (colSpan > 1) {
-      worksheet.mergeCells(
-        currentRowIndex,
-        currentColIndex,
-        currentRowIndex,
-        currentColIndex + colSpan - 1
-      );
-    }
-
-    // 处理跨行合并的情况
-    if (rowSpan > 1) {
-      worksheet.mergeCells(
-        currentRowIndex,
-        currentColIndex,
-        currentRowIndex + rowSpan - 1,
-        currentColIndex
-      );
-    }
-
-    // 处理子列
-    if (column.children && column.children.length > 0) {
-      const childMaxRowIndex = generateHeaders(
-        worksheet,
-        column.children,
-        currentRowIndex + 1,
-        currentColIndex,
-        maxDepth
-      );
-      maxRowIndex = Math.max(maxRowIndex, childMaxRowIndex);
-    } else {
-      maxRowIndex = Math.max(maxRowIndex, currentRowIndex + rowSpan - 1);
-    }
-
-    colIndex += colSpan;
-  });
-
-  return maxRowIndex;
-}
-
-function getColSpan(column) {
-  if (!column.children || column.children.length === 0) {
-    return 1;
-  }
-  return column.children.reduce((sum, child) => sum + getColSpan(child), 0);
-}
-
-function getRowSpan(column, remainingDepth) {
-  if (!column.children || column.children.length === 0) {
-    return remainingDepth;
-  }
-  return 1;
-}
-
-function getMaxDepth(columns) {
-  return columns.reduce((max, column) => {
-    const depth = column.children ? 1 + getMaxDepth(column.children) : 1;
-    return Math.max(max, depth);
-  }, 1);
-}
-
-function fillData(worksheet, data, columns) {
-  data.forEach((rowData) => {
-    const row = worksheet.addRow(
-      columns.flatMap((col) => extractValues(rowData, col))
-    );
-    row.eachCell((cell) => {
-      cell.alignment = alignmentStyle();
-    });
-  });
-}
-
-function autoFitColumns(worksheet) {
-  worksheet.columns.forEach((column) => {
-    let maxLength = 0;
-    column.eachCell({ includeEmpty: true }, (cell) => {
-      const columnLength = cell.value ? cell.value.toString().length : 10;
-      if (columnLength > maxLength) {
-        maxLength = columnLength;
-      }
-    });
-    column.width = maxLength < 10 ? maxLength + 5 : maxLength;
-  });
-}
-
-function generateDescribe(worksheet, describe, data) {
-  if (describe.length > 0) {
-    // 定义开始的位置
-    const startCell = data.length + 7;
-    const endCell = startCell + describe.length + 9;
-    worksheet.mergeCells(`A${startCell}:E${endCell}`);
-
-    // 在表格底部加上文字解释
-    let combinedText = describe.join("\n");
-    const mergedCells = [
-      `A${startCell}`,
-      `B${startCell}`,
-      `C${startCell}`,
-      `D${startCell}`,
-      `E${startCell}`,
-    ];
-
-    // 设置每个合并单元格的自动换行属性
-    mergedCells.forEach((cell) => {
-      const currentCell = worksheet.getCell(cell);
-      currentCell.value = combinedText;
-      currentCell.font = fontStyle;
-      currentCell.alignment = {
-        vertical: "top",
-        horizontal: "left",
-        wrapText: true, // 设置自动换行
-      };
-    });
-    worksheet.getCell(`A${startCell}`).border = borderStyle;
-  }
-}
-
-function extractValues(rowData, column) {
-  if (column.children && column.children.length > 0) {
-    return column.children.flatMap((child) => extractValues(rowData, child));
-  } else {
-    return [rowData[column.key]];
-  }
-}