@fe-free/file 1.4.1

package/.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "useBuiltIns": "usage",
+        "corejs": 3
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-transform-runtime"
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,262 @@
+# @ones-wb/file
+
+## 1.4.1
+
+### Patch Changes
+
+- feat: file
+
+## 1.14.13
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.13
+
+## 1.14.12
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.12
+
+## 1.14.11
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.11
+
+## 1.14.10
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.10
+
+## 1.14.9
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.9
+
+## 1.14.8
+
+### Patch Changes
+
+- f74c458: chore: 依赖梳理
+- Updated dependencies [f74c458]
+  - @ones-wb/tool@1.14.8
+
+## 1.14.7
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.7
+
+## 1.14.6
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.6
+
+## 1.14.5
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.5
+
+## 1.14.4
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.4
+
+## 1.14.3
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.3
+
+## 1.14.2
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.2
+
+## 1.14.1
+
+### Patch Changes
+
+- @ones-wb/tool@1.14.1
+
+## 1.14.0
+
+### Minor Changes
+
+- feat: ids
+
+### Patch Changes
+
+- Updated dependencies
+  - @ones-wb/tool@1.14.0
+
+## 1.13.0
+
+### Patch Changes
+
+- @ones-wb/tool@1.13.0
+
+## 1.12.0
+
+### Patch Changes
+
+- @ones-wb/tool@1.12.0
+
+## 1.11.0
+
+### Patch Changes
+
+- @ones-wb/tool@1.11.0
+
+## 1.10.3
+
+### Patch Changes
+
+- @ones-wb/tool@1.10.3
+
+## 1.10.2
+
+### Patch Changes
+
+- @ones-wb/tool@1.10.2
+
+## 1.10.1
+
+### Patch Changes
+
+- 8ca1be5: fix: xlsxToJSONAndValidate 调整返回值
+  - @ones-wb/tool@1.10.1
+
+## 1.10.0
+
+### Minor Changes
+
+- 85bab00: fix: xlsx 用法变更
+
+### Patch Changes
+
+- @ones-wb/tool@1.10.0
+
+## 1.9.0
+
+### Patch Changes
+
+- Updated dependencies [7cf6c1e]
+  - @ones-wb/tool@1.9.0
+
+## 1.8.3
+
+### Patch Changes
+
+- @ones-wb/tool@1.8.3
+
+## 1.8.2
+
+### Patch Changes
+
+- @ones-wb/tool@1.8.2
+
+## 1.8.1
+
+### Patch Changes
+
+- @ones-wb/tool@1.8.1
+
+## 1.8.0
+
+### Patch Changes
+
+- Updated dependencies [9c69791]
+  - @ones-wb/tool@1.8.0
+
+## 1.7.2
+
+### Patch Changes
+
+- @ones-wb/tool@1.7.2
+
+## 1.7.1
+
+### Patch Changes
+
+- ec92357: fix: xlsx 导入文件解析，忽略空行
+  - @ones-wb/tool@1.7.1
+
+## 1.7.0
+
+### Patch Changes
+
+- Updated dependencies [bab0a97]
+  - @ones-wb/tool@1.7.0
+
+## 1.6.0
+
+### Patch Changes
+
+- @ones-wb/tool@1.6.0
+
+## 1.5.0
+
+### Patch Changes
+
+- Updated dependencies [a5191b1]
+  - @ones-wb/tool@1.5.0
+
+## 1.4.1
+
+### Patch Changes
+
+- @ones-wb/tool@1.4.1
+
+## 1.4.0
+
+### Patch Changes
+
+- @ones-wb/tool@1.4.0
+
+## 1.3.3
+
+### Patch Changes
+
+- @ones-wb/tool@1.3.3
+
+## 1.3.2
+
+### Patch Changes
+
+- Updated dependencies [f71184e]
+  - @ones-wb/tool@1.3.2
+
+## 1.3.1
+
+### Patch Changes
+
+- feat: dayjs => baseTime
+- Updated dependencies
+  - @ones-wb/tool@1.3.1
+
+## 1.3.0
+
+### Minor Changes
+
+- 1.3.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @ones-wb/tool@1.3.0
+
+## 1.2.1
+
+## 1.2.0
+
+### Minor Changes
+
+- feat: add @one-wb/file. 增加前端处理 xlsx 库.

package/README.md

@@ -0,0 +1,3 @@
+# @ones-wb/file
+
+@ones-wb/file 文件处理相关放这里，文件处理逻辑一般都比较重。

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@fe-free/file",
+  "version": "1.4.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
+    "lodash-es": "^4.17.21"
+  },
+  "peerDependencies": {
+    "dayjs": "~1.11.10"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { JSONToXlsx, xlsxToJSON, xlsxToJSONAndValidate } from './xlsx';

package/src/xlsx/helper.ts

@@ -0,0 +1,154 @@
+import type { Cell, Workbook, Worksheet } from 'exceljs';
+import ExcelJS from 'exceljs';
+import FileSaver from 'file-saver';
+import { isNumber } from 'lodash-es';
+
+type JSONSheetItem = {
+  name: string;
+  data: any[][];
+};
+
+function numberToDate(excelDate: number) {
+  if (!isNumber(excelDate)) {
+    return excelDate;
+  }
+  // let utc_days = Math.floor(excelDate - (25567 + 2))
+  // Excel 的 bug, 会把 1900 年当作闰年
+  // https://docs.microsoft.com/en-us/office/troubleshoot/excel/wrongly-assumes-1900-is-leap-year
+  // 东半球 & 0 时区 => 25567 + 2
+  // 西半球 => 25567 + 1
+  const step = new Date().getTimezoneOffset() <= 0 ? 25567 + 2 : 25567 + 1;
+  const utc_days = Math.floor(excelDate - step);
+  // 86400 => 24 * 60 * 60 => 一天的总秒数
+  const utc_value = utc_days * 86400;
+  // 一天的总毫秒数
+  const date_info = new Date(utc_value * 1000);
+
+  // 误差处理
+  const fractional_day = excelDate - Math.floor(excelDate) + 0.0000001;
+  // 自 1970 年至今的总秒数
+  let total_seconds = Math.floor(86400 * fractional_day);
+  const seconds = total_seconds % 60;
+  total_seconds -= seconds;
+  const hours = Math.floor(total_seconds / (60 * 60));
+  const minutes = Math.floor(total_seconds / 60) % 60;
+
+  return new Date(
+    date_info.getFullYear(),
+    date_info.getMonth(),
+    date_info.getDate(),
+    hours,
+    minutes,
+    seconds,
+  );
+}
+
+// 1 worksheet.eachRow 本身会跳过空行
+// 2 row.eachCell 会跳过空列, includeEmpty: 试了也没用，不能使用，具体可看源码。
+//   尝试 maxColIndex 解决
+function eachRowAndCell(worksheet: Worksheet, callback) {
+  let maxColIndex = 0;
+
+  worksheet.eachRow(function (row, rowNumber) {
+    // @ts-ignore
+    maxColIndex = Math.max(maxColIndex, row._cells.length as number);
+
+    for (let colIndex = 0; colIndex < maxColIndex; colIndex++) {
+      const cell = row.getCell(colIndex + 1);
+      const colNumber = colIndex + 1;
+
+      callback({ cell, rowNumber, colNumber });
+    }
+  });
+}
+
+function worksheetToJSON(
+  worksheet: Worksheet,
+  processCell?: (info: { cell: Cell; colNumber: number; rowNumber: number }) => void,
+) {
+  const sheet: any[][] = [];
+
+  eachRowAndCell(worksheet, ({ cell, colNumber, rowNumber }) => {
+    if (processCell) {
+      processCell({ cell, colNumber, rowNumber });
+    }
+    sheet[rowNumber - 1] = sheet[rowNumber - 1] || [];
+    sheet[rowNumber - 1][colNumber - 1] = cell.value;
+  });
+
+  // 挪掉空行。 空行会显示 null
+  return sheet.filter(Boolean);
+}
+
+interface JSONToWorksheetOption {
+  processCell?: (info: { value: any; colNumber: number; rowNumber: number }) => object;
+}
+
+function JSONToWorksheet(json: any[][], worksheet: Worksheet, options?: JSONToWorksheetOption) {
+  const { processCell = (info) => ({ value: info.value }) } = options || {};
+
+  let maxColIndex = 0;
+  // 不能使用 Array.forEach，会忽略数组的 empty [,1,,]。 行不会 empty
+  for (let rowIndex = 0; rowIndex < json.length; rowIndex++) {
+    const row = json[rowIndex];
+    // 列需要取最大的，可能存在一系列因为 empty 导致 length 小。
+    maxColIndex = Math.max(maxColIndex, row.length);
+    for (let colIndex = 0; colIndex < maxColIndex; colIndex++) {
+      const value = row[colIndex];
+      const nCell = processCell({
+        value,
+        colNumber: colIndex + 1,
+        rowNumber: rowIndex + 1,
+      });
+
+      Object.assign(worksheet.getCell(rowIndex + 1, colIndex + 1), nCell);
+    }
+  }
+}
+
+// 复制 value note font
+async function copyWorkbook(workbook: Workbook): Promise<Workbook> {
+  const newWorkbook = new ExcelJS.Workbook() as Workbook;
+
+  workbook.eachSheet((worksheet) => {
+    const newWorksheet = newWorkbook.addWorksheet(worksheet.name);
+
+    eachRowAndCell(worksheet, ({ cell, colNumber, rowNumber }) => {
+      newWorksheet.getCell(rowNumber, colNumber).value = cell.value;
+
+      if (cell.note) {
+        newWorksheet.getCell(rowNumber, colNumber).note = cell.note;
+        newWorksheet.getCell(rowNumber, colNumber).font = {
+          color: {
+            argb: 'FFFF0000',
+          },
+        };
+      }
+    });
+  });
+
+  return newWorkbook;
+}
+
+function readFile(file: File): Promise<Buffer> {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+
+    reader.onload = (data) => {
+      resolve(data.target?.result as Buffer);
+    };
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+async function exportFile(workbook: Workbook, fileName?: string) {
+  const buffer = await workbook.xlsx.writeBuffer();
+  const blob = new window.Blob([buffer], {
+    type: 'application/octet-stream',
+  });
+  // fileName 中不能包含特殊字符
+  FileSaver.saveAs(blob, fileName ? fileName.replace(/[<>\\:;?/*|]/g, '-') : 'data.xlsx');
+}
+
+export { copyWorkbook, exportFile, JSONToWorksheet, numberToDate, readFile, worksheetToJSON };
+export type { JSONSheetItem };

package/src/xlsx/index.ts

@@ -0,0 +1,3 @@
+export { JSONToXlsx } from './json_to_xlsx';
+export { xlsxToJSON } from './xlsx_to_json';
+export { xlsxToJSONAndValidate } from './xlsx_to_json_and_validate';

package/src/xlsx/json_to_xlsx.ts

@@ -0,0 +1,33 @@
+import ExcelJS from 'exceljs';
+import type { JSONSheetItem } from './helper';
+import { exportFile, JSONToWorksheet } from './helper';
+
+interface JSONToXlsxOptions {
+  /** 默认 data.xlsx */
+  fileName?: string;
+  /** 用法参考 exceljs。可做比如 标红、备注等 */
+  processCell?: (info: { value: any; colNumber: number; rowNumber: number }) => {
+    value: any;
+    font?: object;
+    note?: string;
+  };
+}
+
+/** xlsxJSON 转 xlsx，其中日期格式按字符串输出 */
+async function JSONToXlsx(xlsxJSON: JSONSheetItem[], options?: JSONToXlsxOptions): Promise<void> {
+  const { fileName = 'data.xlsx', processCell } = options || {};
+  const workbook = new ExcelJS.Workbook();
+
+  // json 写入 workbook
+  xlsxJSON.forEach((sheet) => {
+    const worksheet = workbook.addWorksheet(sheet.name);
+    JSONToWorksheet(sheet.data, worksheet, {
+      processCell,
+    });
+  });
+
+  // export
+  await exportFile(workbook, fileName);
+}
+
+export { JSONToXlsx };

package/src/xlsx/xlsx.stories.tsx

@@ -0,0 +1,205 @@
+import { JSONToXlsx, xlsxToJSON, xlsxToJSONAndValidate } from '@fe-free/file';
+import dayjs from 'dayjs';
+import { isDate, isNumber, isString } from 'lodash-es';
+import React from 'react';
+
+export default {
+  title: '@fe-free/file/xlsx',
+};
+
+export const XlsxToJSON = () => (
+  <>
+    <div>
+      导入 xlsx
+      <br />
+      <input
+        type="file"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            xlsxToJSON(file).then((json) => {
+              const element = document.querySelector('.data1');
+              if (element) {
+                element.innerHTML = JSON.stringify(json, null, 2);
+              }
+            });
+          }
+        }}
+      />
+    </div>
+    <pre className="data1" />
+  </>
+);
+
+export const JSONToXlsxExample = () => (
+  <>
+    <pre>
+      数据源：
+      {JSON.stringify(
+        [
+          {
+            name: 'sheet1',
+            data: [
+              ['日期', '必填项'],
+              ['2025/1/1', '是'],
+              ['2025/12/31', '否'],
+            ],
+          },
+        ],
+        null,
+        2,
+      )}
+    </pre>
+    <div>
+      <button
+        onClick={() => {
+          JSONToXlsx([
+            {
+              name: 'sheet1',
+              data: [
+                ['日期', '必填项'],
+                ['2025/1/1', '是'],
+                ['2025/12/31', '否'],
+              ],
+            },
+          ]);
+        }}
+      >
+        export
+      </button>
+    </div>
+    <div>
+      <button
+        onClick={() => {
+          JSONToXlsx(
+            [
+              {
+                name: 'sheet1',
+                data: [
+                  ['日期', '必填项'],
+                  ['2025/1/1', '是'],
+                  ['2024/12/31', '否'],
+                ],
+              },
+            ],
+            {
+              processCell: ({ rowNumber, colNumber, value }) => {
+                if (colNumber === 1 && rowNumber > 1) {
+                  const isValid = dayjs(value).year() < dayjs().year();
+                  if (isValid) {
+                    return {
+                      value,
+                      font: {
+                        color: {
+                          argb: 'FFFF0000',
+                        },
+                      },
+                      note: '日期需要当前年份',
+                    };
+                  }
+                }
+                return { value };
+              },
+            },
+          );
+        }}
+      >
+        export（标红&备注）
+      </button>
+    </div>
+  </>
+);
+
+export const XlsxToJSONAndValidate = () => {
+  const [validateResult, setValidateResult] = React.useState<any>(null);
+
+  const validate = ({ cell, colNumber }: { cell: any; colNumber: number }) => {
+    if (
+      isString(cell.value) &&
+      (cell.value?.startsWith('日期') || cell.value?.startsWith('必填项'))
+    ) {
+      return;
+    }
+
+    let message = '';
+
+    // 日期列
+    if (colNumber === 1) {
+      // 空值
+      if (!cell.value) {
+        message = '错误';
+      } else {
+        // 如果是数字
+        if (isNumber(cell.value)) {
+          message = '格式错误';
+        }
+        // 如果是日期类型
+        if (isDate(cell.value)) {
+          const d = dayjs(cell.value);
+          // 非法
+          if (!d.isValid()) {
+            message = '格式错误';
+          }
+          // 超出范围
+          if (Math.abs(d.year() - dayjs().year()) > 1) {
+            message = '范围错误';
+          }
+        }
+        // 如果是字符串
+        else if (isString(cell.value)) {
+          const reg = /^\d{4}([./-])\d{1,2}([./-])\d{1,2}$/g;
+
+          // 不合法
+          if (!reg.test(cell.value)) {
+            message = '格式错误';
+          }
+
+          // 超出范围
+          const d = dayjs(cell.value);
+          if (Math.abs(d.year() - dayjs().year()) > 1) {
+            message = '范围错误';
+          }
+        }
+      }
+    }
+    // 类型列
+    else if (colNumber === 2) {
+      // 空值
+      if (!cell.value) {
+        message = '不能为空';
+      } else {
+        const isValid = ['是', '否'].includes(cell.value);
+        if (!isValid) {
+          message = '格式错误';
+        }
+      }
+    }
+
+    if (message) {
+      return { message };
+    }
+  };
+
+  return (
+    <>
+      <div>
+        导入 xlsx 和 校验(假如第一列为日期限制当前年份，第二列为[是、否])
+        <input
+          type="file"
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) {
+              xlsxToJSONAndValidate(file, validate).then((res) => {
+                setValidateResult(res);
+              });
+            }
+          }}
+        />
+      </div>
+      <pre>{JSON.stringify(validateResult, null, 2)}</pre>
+      <button onClick={() => validateResult?.exportXlsx()} disabled={!validateResult}>
+        export with validate
+      </button>
+    </>
+  );
+};

package/src/xlsx/xlsx_to_json.ts

@@ -0,0 +1,30 @@
+import type { Workbook } from 'exceljs';
+import ExcelJS from 'exceljs';
+import type { JSONSheetItem } from './helper';
+import { readFile, worksheetToJSON } from './helper';
+
+/**
+ * xlsx 转 json  [ {name: 'sheet1', data: [ [], [] ]} ]
+ */
+async function xlsxToJSON(file: File): Promise<JSONSheetItem[]> {
+  const workbook = new ExcelJS.Workbook() as Workbook;
+
+  // 读 file
+  const buffer = await readFile(file);
+  await workbook.xlsx.load(buffer);
+
+  // 转换成 json
+  const xlsxJSON: JSONSheetItem[] = [];
+  workbook.eachSheet((worksheet) => {
+    const data = worksheetToJSON(worksheet);
+
+    xlsxJSON.push({
+      name: worksheet.name,
+      data,
+    });
+  });
+
+  return xlsxJSON;
+}
+
+export { xlsxToJSON };

package/src/xlsx/xlsx_to_json_and_validate.ts

@@ -0,0 +1,88 @@
+import type { Cell, Workbook } from 'exceljs';
+import ExcelJS from 'exceljs';
+import type { JSONSheetItem } from './helper';
+import { copyWorkbook, exportFile, readFile, worksheetToJSON } from './helper';
+
+// 如果错误这返回错误信息，这将会修改 xlsx，且标红和批注.
+// col row 从 1 开始
+type xlsxToJSONAndValidateValidate = (info: {
+  cell: Cell;
+  colNumber: number;
+  rowNumber: number;
+}) => undefined | { message };
+
+interface xlsxToJSONAndValidateOptions {
+  fileName?: string;
+}
+
+interface xlsxToJSONAndValidateResult {
+  data: JSONSheetItem[];
+  // 每个 sheet 是否有错误
+  hasErrors: boolean[];
+  // 第一个 sheet 是否有错误
+  firstError: boolean;
+  exportXlsx: () => Promise<void>;
+}
+
+async function xlsxToJSONAndValidate(
+  file: File,
+  validate: xlsxToJSONAndValidateValidate,
+  options?: xlsxToJSONAndValidateOptions,
+): Promise<xlsxToJSONAndValidateResult> {
+  const { fileName = 'data.xlsx' } = options || {};
+
+  const workbook = new ExcelJS.Workbook() as Workbook;
+
+  // 读 file
+  const buffer = await readFile(file);
+  await workbook.xlsx.load(buffer);
+
+  // 错误处理
+  const hasErrors: boolean[] = [];
+  function doValidate(info, sheetIndex) {
+    const validateResult = validate(info);
+    if (validateResult) {
+      Object.assign(info.cell, {
+        note: validateResult.message,
+        font: {
+          color: {
+            argb: 'FFFF0000',
+          },
+        },
+      });
+
+      hasErrors[sheetIndex] = true;
+    }
+  }
+
+  let sheetIndex = 0;
+  // 转换成 json
+  const xlsxJSON: JSONSheetItem[] = [];
+  workbook.eachSheet((worksheet) => {
+    const data = worksheetToJSON(worksheet, (info) => {
+      doValidate(info, sheetIndex);
+    });
+
+    xlsxJSON.push({
+      name: worksheet.name,
+      data,
+    });
+
+    sheetIndex += 1;
+  });
+
+  // 导出错误的 xlsx
+  async function exportXlsx() {
+    const newWorkbook = await copyWorkbook(workbook);
+    await exportFile(newWorkbook, fileName);
+  }
+
+  return {
+    data: xlsxJSON,
+    hasErrors,
+    firstError: !!hasErrors[0],
+    exportXlsx,
+  };
+}
+
+export { xlsxToJSONAndValidate };