feat: add formatExcelJSCell config in vtable-export #1989

VisActor · Jul 3, 2024 · 8c378fb · 8c378fb
1 parent 8b48212
commit 8c378fb
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 5 deletions.
diff --git a/common/changes/@visactor/vtable/feat-export-format_2024-07-01-13-15.json b/common/changes/@visactor/vtable/feat-export-format_2024-07-01-13-15.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: add formatExcelJSCell config in vtable-export #1989",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/docs/assets/guide/en/export/excel.md b/docs/assets/guide/en/export/excel.md
@@ -76,4 +76,36 @@ const excelOption = {
   }
 };
 downloadExcel(await exportVTableToExcel(tableInstance, excelOption));
-```
+```
+
+
+### formatExcelJSCell
+
+If you need to further customize the export style, you can set `formatExcelJSCell` to a function. The function parameters are cell information and ExcelJS cell objects. The function return value is the ExcelJS cell object. If `undefined` is returned, the default export logic is used. You can automatically set ExcelJS cell properties in the function. For details, please refer to https://github.com/exceljs/exceljs?tab=readme-ov-file#styles
+
+```ts
+type CellInfo = {
+  cellType: string;
+  cellValue: string;
+  table: IVTable;
+  col: number;
+  row: number;
+};
+
+type ExportVTableToExcelOptions = {
+  // ......
+  formatExceljsCell?: (cellInfo: CellInfo, cellInExceljs: ExcelJS.Cell) => ExcelJS.Cell;
+};
+```
+
+```js
+const excelOption = {
+  formatExcelJSCell: (cellInfo, cell) => {
+    if (cellInfo.col === 1) {
+      cell.numFmt = '0.00%';
+    }
+    return cell;
+  }
+};
+downloadExcel(await exportVTableToExcel(tableInstance, excelOption));
+```
diff --git a/docs/assets/guide/zh/export/excel.md b/docs/assets/guide/zh/export/excel.md
@@ -62,7 +62,7 @@ type CellInfo = {
 };
 
 type ExportVTableToExcelOptions = {
-  ignoreIcon?: boolean;
+  // ......
   formatExportOutput?: (cellInfo: CellInfo) => string | undefined;
 };
 ```
@@ -76,4 +76,35 @@ const excelOption = {
   }
 };
 downloadExcel(await exportVTableToExcel(tableInstance, excelOption));
+```
+
+### formatExcelJSCell
+
+对于导出样式有进一步的定制化需求的话，可以设置`formatExcelJSCell`为一个函数，函数的参数为单元格信息和ExcelJS的单元格对象，函数的返回值为ExcelJS的单元格对象，如果返回`undefined`，则按照默认导出逻辑处理。可以在函数中自动设置ExcelJS的单元格属性，具体可以参考 https://github.com/exceljs/exceljs?tab=readme-ov-file#styles
+
+```ts
+type CellInfo = {
+  cellType: string;
+  cellValue: string;
+  table: IVTable;
+  col: number;
+  row: number;
+};
+
+type ExportVTableToExcelOptions = {
+  // ......
+  formatExceljsCell?: (cellInfo: CellInfo, cellInExceljs: ExcelJS.Cell) => ExcelJS.Cell;
+};
+```
+
+```js
+const excelOption = {
+  formatExcelJSCell: (cellInfo, cell) => {
+    if (cellInfo.col === 1) {
+      cell.numFmt = '0.00%';
+    }
+    return cell;
+  }
+};
+downloadExcel(await exportVTableToExcel(tableInstance, excelOption));
 ```
diff --git a/packages/vtable-export/src/excel/index.ts b/packages/vtable-export/src/excel/index.ts
@@ -18,6 +18,7 @@ export type CellInfo = {
 export type ExportVTableToExcelOptions = {
   ignoreIcon?: boolean;
   formatExportOutput?: (cellInfo: CellInfo) => string | undefined;
+  formatExcelJSCell?: (cellInfo: CellInfo, cellInExcelJS: ExcelJS.Cell) => ExcelJS.Cell;
 };
 
 export async function exportVTableToExcel(tableInstance: IVTable, options?: ExportVTableToExcelOptions) {
@@ -132,17 +133,25 @@ function addCell(
     const cellInfo = { cellType, cellValue, table: tableInstance, col, row };
     const formattedValue = options.formatExportOutput(cellInfo);
     if (formattedValue !== undefined) {
-      const cell = worksheet.getCell(encodeCellAddress(col, row));
+      let cell = worksheet.getCell(encodeCellAddress(col, row));
       cell.value = formattedValue;
       cell.font = getCellFont(cellStyle, cellType);
       cell.fill = getCellFill(cellStyle);
       cell.border = getCellBorder(cellStyle);
       const offset = getHierarchyOffset(col, row, tableInstance as any);
       cell.alignment = getCellAlignment(cellStyle, Math.ceil(offset / cell.font.size));
-      return;
+
+      if (cell && options.formatExcelJSCell) {
+        const formatedCell = options.formatExcelJSCell({ cellType, cellValue, table: tableInstance, col, row }, cell);
+        if (formatedCell) {
+          cell = formatedCell;
+        }
+      }
+      return cell;
     }
   }
 
+  let cell;
   if (
     cellType === 'image' ||
     cellType === 'video' ||
@@ -165,7 +174,7 @@ function addCell(
       // ext: { width: tableInstance.getColWidth(col), height: tableInstance.getRowHeight(row) }
     });
   } else if (cellType === 'text' || cellType === 'link') {
-    const cell = worksheet.getCell(encodeCellAddress(col, row));
+    cell = worksheet.getCell(encodeCellAddress(col, row));
     cell.value = getCellValue(cellValue, cellType);
     cell.font = getCellFont(cellStyle, cellType);
     cell.fill = getCellFill(cellStyle);
@@ -188,6 +197,14 @@ function addCell(
     });
     tableInstance.scenegraph.updateNextFrame(); // rerender chart to avoid display error
   }
+
+  if (cell && options.formatExcelJSCell) {
+    const formatedCell = options.formatExcelJSCell({ cellType, cellValue, table: tableInstance, col, row }, cell);
+    if (formatedCell) {
+      cell = formatedCell;
+    }
+  }
+  return cell;
 }
 
 function getCellValue(cellValue: string, cellType: CellType) {