@canvas-components/utils 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +91 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# @canvas-components/utils
|
|
2
|
+
|
|
3
|
+
`@canvas-components/utils` 提供和表格外围常见流程相关的浏览器工具能力，主要覆盖剪贴板写入和导出文件。
|
|
4
|
+
|
|
5
|
+
## 功能作用
|
|
6
|
+
|
|
7
|
+
- 写入文本、二维表格文本、JSON 到系统剪贴板
|
|
8
|
+
- 把行列数据导出为 `csv`、`txt`、`xlsx`
|
|
9
|
+
- 生成导出前的中间文本 / 记录结构
|
|
10
|
+
- 对大批量导出做分片让步，减少主线程长时间阻塞
|
|
11
|
+
|
|
12
|
+
## 安装方法
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm add @canvas-components/utils
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## 使用方法
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import {
|
|
22
|
+
copyRows,
|
|
23
|
+
exportTableToXlsx,
|
|
24
|
+
} from "@canvas-components/utils";
|
|
25
|
+
|
|
26
|
+
await copyRows([
|
|
27
|
+
["姓名", "年龄"],
|
|
28
|
+
["张三", 28],
|
|
29
|
+
["李四", 31],
|
|
30
|
+
]);
|
|
31
|
+
|
|
32
|
+
await exportTableToXlsx({
|
|
33
|
+
fileName: "users.xlsx",
|
|
34
|
+
rows: [
|
|
35
|
+
{ name: "张三", age: 28 },
|
|
36
|
+
{ name: "李四", age: 31 },
|
|
37
|
+
],
|
|
38
|
+
columns: [
|
|
39
|
+
{ key: "name", title: "姓名", value: (row) => row.name },
|
|
40
|
+
{ key: "age", title: "年龄", value: (row) => row.age },
|
|
41
|
+
],
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 属性说明
|
|
46
|
+
|
|
47
|
+
### `ExportTableColumn<Row>`
|
|
48
|
+
|
|
49
|
+
| 属性 | 类型 | 说明 |
|
|
50
|
+
| --- | --- | --- |
|
|
51
|
+
| `key` | `string` | 列唯一标识 |
|
|
52
|
+
| `title` | `string` | 导出列标题 |
|
|
53
|
+
| `value` | `(row: Row, index: number) => unknown` | 从行数据中取导出值 |
|
|
54
|
+
|
|
55
|
+
### `ClipboardCellValue`
|
|
56
|
+
|
|
57
|
+
支持的剪贴板单元格值类型：
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
type ClipboardCellValue = string | number | boolean | null | undefined;
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## 方法说明
|
|
64
|
+
|
|
65
|
+
### 剪贴板
|
|
66
|
+
|
|
67
|
+
| 方法 | 签名 | 说明 |
|
|
68
|
+
| --- | --- | --- |
|
|
69
|
+
| `copyText` | `(text: string) => Promise<void>` | 写入纯文本 |
|
|
70
|
+
| `copyRows` | `(rows: ClipboardCellValue[][]) => Promise<void>` | 把二维数据写入剪贴板 |
|
|
71
|
+
| `copyJson` | `(value: unknown, space = 2) => Promise<void>` | 写入 JSON 文本 |
|
|
72
|
+
| `formatRowsForClipboard` | `(rows) => string` | 把二维数据转成制表符文本 |
|
|
73
|
+
|
|
74
|
+
### 导出
|
|
75
|
+
|
|
76
|
+
| 方法 | 签名 | 说明 |
|
|
77
|
+
| --- | --- | --- |
|
|
78
|
+
| `mapRowsToExportRecords` | `({ rows, columns }) => Record<string, unknown>[]` | 生成导出记录数组 |
|
|
79
|
+
| `buildCsvContent` | `({ rows, columns }) => string` | 生成 CSV 文本 |
|
|
80
|
+
| `buildTxtContent` | `({ rows, columns }) => string` | 生成 TXT 文本 |
|
|
81
|
+
| `downloadJsonFile` | `({ fileName, data, space? }) => Promise<void>` | 下载 JSON |
|
|
82
|
+
| `exportTableToCsv` | `({ fileName, rows, columns }) => Promise<void>` | 导出 CSV |
|
|
83
|
+
| `exportTableToTxt` | `({ fileName, rows, columns }) => Promise<void>` | 导出 TXT |
|
|
84
|
+
| `exportTableToXlsx` | `({ fileName, rows, columns, sheetName? }) => Promise<void>` | 导出 XLSX |
|
|
85
|
+
|
|
86
|
+
## 适用场景
|
|
87
|
+
|
|
88
|
+
- 表格导出
|
|
89
|
+
- 系统复制功能
|
|
90
|
+
- 大批量数据下载
|
|
91
|
+
- 非 React 项目里的浏览器工具函数复用
|