@canvas-components/utils

@canvas-components/utils 提供和表格外围常见流程相关的浏览器工具能力，主要覆盖剪贴板写入和导出文件。

功能作用

• 写入文本、二维表格文本、JSON 到系统剪贴板
• 把行列数据导出为 csv、txt、xlsx
• 生成导出前的中间文本 / 记录结构
• 对大批量导出做分片让步，减少主线程长时间阻塞

安装方法

pnpm add @canvas-components/utils

最低环境要求：

• Node.js >= 18.12.0
• pnpm >= 9.0.0

使用方法

import {
  copyRows,
  exportTableToXlsx,
} from "@canvas-components/utils";

await copyRows([
  ["姓名", "年龄"],
  ["张三", 28],
  ["李四", 31],
]);

await exportTableToXlsx({
  fileName: "users.xlsx",
  rows: [
    { name: "张三", age: 28 },
    { name: "李四", age: 31 },
  ],
  columns: [
    { key: "name", title: "姓名", value: (row) => row.name },
    { key: "age", title: "年龄", value: (row) => row.age },
  ],
});

属性说明

ExportTableColumn<Row>

| 属性 | 类型 | 说明 | | --- | --- | --- | | key | string | 列唯一标识 | | title | string | 导出列标题 | | value | (row: Row, index: number) => unknown | 从行数据中取导出值 |

ClipboardCellValue

支持的剪贴板单元格值类型：

type ClipboardCellValue = string | number | boolean | null | undefined;

方法说明

剪贴板

| 方法 | 签名 | 说明 | | --- | --- | --- | | copyText | (text: string) => Promise<void> | 写入纯文本 | | copyRows | (rows: ClipboardCellValue[][]) => Promise<void> | 把二维数据写入剪贴板 | | copyJson | (value: unknown, space = 2) => Promise<void> | 写入 JSON 文本 | | formatRowsForClipboard | (rows) => string | 把二维数据转成制表符文本 |

导出

| 方法 | 签名 | 说明 | | --- | --- | --- | | mapRowsToExportRecords | ({ rows, columns }) => Record<string, unknown>[] | 生成导出记录数组 | | buildCsvContent | ({ rows, columns }) => string | 生成 CSV 文本 | | buildTxtContent | ({ rows, columns }) => string | 生成 TXT 文本 | | downloadJsonFile | ({ fileName, data, space? }) => Promise<void> | 下载 JSON | | exportTableToCsv | ({ fileName, rows, columns }) => Promise<void> | 导出 CSV | | exportTableToTxt | ({ fileName, rows, columns }) => Promise<void> | 导出 TXT | | exportTableToXlsx | ({ fileName, rows, columns, sheetName? }) => Promise<void> | 导出 XLSX |

适用场景

• 表格导出
• 系统复制功能
• 大批量数据下载
• 非 React 项目里的浏览器工具函数复用