@bsg-export/vue 1.0.6 → 1.0.7
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 +110 -0
- package/dist/ExportButton.vue.d.ts.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/use-exporter.d.ts +7 -66
- package/dist/use-exporter.d.ts.map +1 -1
- package/dist/use-exporter.js +12 -8
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# @bsg-export/vue
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@bsg-export/vue)
|
|
4
|
+
|
|
5
|
+
> [belobog-stellar-grid](https://github.com/kurisu994/belobog-stellar-grid) 的 Vue 3 官方封装
|
|
6
|
+
|
|
7
|
+
## 简介
|
|
8
|
+
|
|
9
|
+
提供 `useExporter` Composable 和 `ExportButton` 组件,自动管理 WASM 初始化、导出状态和进度追踪。
|
|
10
|
+
|
|
11
|
+
## 安装
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @bsg-export/vue belobog-stellar-grid
|
|
15
|
+
# 或
|
|
16
|
+
pnpm add @bsg-export/vue belobog-stellar-grid
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
**前置依赖**:`vue >= 3.3.0`、`belobog-stellar-grid >= 1.0.0`
|
|
20
|
+
|
|
21
|
+
## 快速开始
|
|
22
|
+
|
|
23
|
+
### useExporter Composable
|
|
24
|
+
|
|
25
|
+
```vue
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { useExporter, ExportFormat } from '@bsg-export/vue';
|
|
28
|
+
|
|
29
|
+
const { initialized, loading, progress, exportTable } = useExporter();
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<template>
|
|
33
|
+
<button
|
|
34
|
+
:disabled="!initialized || loading"
|
|
35
|
+
@click="exportTable({ tableId: 'my-table', filename: '报表.xlsx', format: ExportFormat.Xlsx })"
|
|
36
|
+
>
|
|
37
|
+
{{ loading ? `导出中 ${Math.round(progress)}%` : '导出 Excel' }}
|
|
38
|
+
</button>
|
|
39
|
+
</template>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### ExportButton 组件
|
|
43
|
+
|
|
44
|
+
```vue
|
|
45
|
+
<script setup lang="ts">
|
|
46
|
+
import { ExportButton, ExportFormat } from '@bsg-export/vue';
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<template>
|
|
50
|
+
<ExportButton
|
|
51
|
+
table-id="my-table"
|
|
52
|
+
filename="报表.xlsx"
|
|
53
|
+
:format="ExportFormat.Xlsx"
|
|
54
|
+
@success="console.log('导出成功')"
|
|
55
|
+
@error="(err) => console.error('导出失败', err)"
|
|
56
|
+
>
|
|
57
|
+
导出 Excel
|
|
58
|
+
</ExportButton>
|
|
59
|
+
</template>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## API
|
|
63
|
+
|
|
64
|
+
### `useExporter()` 返回值
|
|
65
|
+
|
|
66
|
+
所有返回值均为 Vue 3 响应式 `Ref`。
|
|
67
|
+
|
|
68
|
+
| 属性/方法 | 类型 | 说明 |
|
|
69
|
+
|-----------|------|------|
|
|
70
|
+
| `initialized` | `Ref<boolean>` | WASM 是否初始化完成 |
|
|
71
|
+
| `loading` | `Ref<boolean>` | 是否正在导出 |
|
|
72
|
+
| `progress` | `Ref<number>` | 导出进度 (0-100) |
|
|
73
|
+
| `error` | `Ref<Error \| null>` | 错误信息 |
|
|
74
|
+
| `exportTable` | `(options) => void` | DOM 表格导出 |
|
|
75
|
+
| `exportData` | `(data, options?) => void` | 纯数据导出 |
|
|
76
|
+
| `exportTablesXlsx` | `(options) => void` | 多 Sheet 导出 |
|
|
77
|
+
| `exportCsvBatch` | `(options) => Promise` | CSV 分批导出 |
|
|
78
|
+
| `exportXlsxBatch` | `(options) => Promise` | XLSX 分批导出 |
|
|
79
|
+
| `exportTablesBatch` | `(options) => Promise` | 多 Sheet 分批导出 |
|
|
80
|
+
|
|
81
|
+
### `<ExportButton>` Props
|
|
82
|
+
|
|
83
|
+
| Prop | 类型 | 默认值 | 说明 |
|
|
84
|
+
|------|------|--------|------|
|
|
85
|
+
| `table-id` | `string` | — | 要导出的表格 ID(必填) |
|
|
86
|
+
| `filename` | `string` | — | 导出文件名 |
|
|
87
|
+
| `format` | `ExportFormat` | `Csv` | 导出格式 |
|
|
88
|
+
| `exclude-hidden` | `boolean` | `false` | 排除隐藏行/列 |
|
|
89
|
+
| `with-bom` | `boolean` | `false` | 添加 UTF-8 BOM |
|
|
90
|
+
| `disabled` | `boolean` | `false` | 是否禁用按钮 |
|
|
91
|
+
| `initializing-text` | `string` | `'初始化中...'` | 初始化中按钮文本 |
|
|
92
|
+
| `loading-text` | `string` | `'导出中 {progress}%'` | 导出中按钮文本 |
|
|
93
|
+
|
|
94
|
+
### 事件
|
|
95
|
+
|
|
96
|
+
| 事件 | 参数 | 说明 |
|
|
97
|
+
|------|------|------|
|
|
98
|
+
| `success` | — | 导出成功 |
|
|
99
|
+
| `error` | `Error` | 导出失败 |
|
|
100
|
+
| `progress` | `number` | 进度变化 |
|
|
101
|
+
|
|
102
|
+
### 插槽
|
|
103
|
+
|
|
104
|
+
| 插槽 | 说明 |
|
|
105
|
+
|------|------|
|
|
106
|
+
| `default` | 按钮内容(默认显示"导出") |
|
|
107
|
+
|
|
108
|
+
## 许可证
|
|
109
|
+
|
|
110
|
+
MIT OR Apache-2.0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExportButton.vue.d.ts","sourceRoot":"","sources":["../src/ExportButton.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ExportButton.vue.d.ts","sourceRoot":"","sources":["../src/ExportButton.vue"],"names":[],"mappings":"AAiGA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAe;AACf,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW;IACX,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,gBAAgB;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAiFD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAwB/C,QAAA,MAAM,eAAe;;;;;;;;;cAhHR,OAAO;sBAEC,MAAM;iBAEX,MAAM;6EAoHpB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -6,8 +6,7 @@
|
|
|
6
6
|
* @packageDocumentation
|
|
7
7
|
*/
|
|
8
8
|
export { useExporter } from './use-exporter';
|
|
9
|
-
export type { ExportTableOptions, ExportTablesXlsxOptions, ExportCsvBatchOptions, ExportXlsxBatchOptions, ExportTablesBatchOptions, } from './use-exporter';
|
|
10
9
|
export { default as ExportButton } from './ExportButton.vue';
|
|
11
|
-
export type { Column, MergeCellValue, CellValue, MergeableCellValue, DataRow, ExportDataOptions, SheetConfig, BatchSheetConfig, ProgressCallback, } from '@bsg-export/types';
|
|
10
|
+
export type { Column, MergeCellValue, CellValue, MergeableCellValue, DataRow, ExportDataOptions, SheetConfig, BatchSheetConfig, ProgressCallback, ExportTableOptions, ExportTablesXlsxOptions, ExportCsvBatchOptions, ExportXlsxBatchOptions, ExportTablesBatchOptions, } from '@bsg-export/types';
|
|
12
11
|
export { ExportFormat } from '@bsg-export/types';
|
|
13
12
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,YAAY,EACV,MAAM,EACN,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
|
package/dist/use-exporter.d.ts
CHANGED
|
@@ -19,66 +19,7 @@
|
|
|
19
19
|
* </template>
|
|
20
20
|
* ```
|
|
21
21
|
*/
|
|
22
|
-
import type {
|
|
23
|
-
/** export_table 的参数配置 */
|
|
24
|
-
export interface ExportTableOptions {
|
|
25
|
-
/** 要导出的 HTML 表格元素的 ID */
|
|
26
|
-
tableId: string;
|
|
27
|
-
/** 导出文件名 */
|
|
28
|
-
filename?: string;
|
|
29
|
-
/** 导出格式 */
|
|
30
|
-
format?: ExportFormat;
|
|
31
|
-
/** 是否排除隐藏行/列 */
|
|
32
|
-
excludeHidden?: boolean;
|
|
33
|
-
/** 是否添加 UTF-8 BOM(仅 CSV 有效) */
|
|
34
|
-
withBom?: boolean;
|
|
35
|
-
/** 回调失败是否中断导出 */
|
|
36
|
-
strictProgressCallback?: boolean;
|
|
37
|
-
}
|
|
38
|
-
/** 多工作表导出的参数配置 */
|
|
39
|
-
export interface ExportTablesXlsxOptions {
|
|
40
|
-
/** Sheet 配置数组 */
|
|
41
|
-
sheets: SheetConfig[];
|
|
42
|
-
/** 导出文件名 */
|
|
43
|
-
filename?: string;
|
|
44
|
-
}
|
|
45
|
-
/** 分批导出 CSV 的参数配置 */
|
|
46
|
-
export interface ExportCsvBatchOptions {
|
|
47
|
-
/** 要导出的 HTML 表格元素的 ID */
|
|
48
|
-
tableId: string;
|
|
49
|
-
/** 可选的独立 tbody ID */
|
|
50
|
-
tbodyId?: string;
|
|
51
|
-
/** 导出文件名 */
|
|
52
|
-
filename?: string;
|
|
53
|
-
/** 每批处理行数 */
|
|
54
|
-
batchSize?: number;
|
|
55
|
-
/** 是否排除隐藏行/列 */
|
|
56
|
-
excludeHidden?: boolean;
|
|
57
|
-
/** 是否添加 UTF-8 BOM */
|
|
58
|
-
withBom?: boolean;
|
|
59
|
-
}
|
|
60
|
-
/** 分批导出 XLSX 的参数配置 */
|
|
61
|
-
export interface ExportXlsxBatchOptions {
|
|
62
|
-
/** 要导出的 HTML 表格元素的 ID */
|
|
63
|
-
tableId: string;
|
|
64
|
-
/** 可选的独立 tbody ID */
|
|
65
|
-
tbodyId?: string;
|
|
66
|
-
/** 导出文件名 */
|
|
67
|
-
filename?: string;
|
|
68
|
-
/** 每批处理行数 */
|
|
69
|
-
batchSize?: number;
|
|
70
|
-
/** 是否排除隐藏行/列 */
|
|
71
|
-
excludeHidden?: boolean;
|
|
72
|
-
}
|
|
73
|
-
/** 多工作表分批导出的参数配置 */
|
|
74
|
-
export interface ExportTablesBatchOptions {
|
|
75
|
-
/** Sheet 配置数组 */
|
|
76
|
-
sheets: BatchSheetConfig[];
|
|
77
|
-
/** 导出文件名 */
|
|
78
|
-
filename?: string;
|
|
79
|
-
/** 每批处理行数 */
|
|
80
|
-
batchSize?: number;
|
|
81
|
-
}
|
|
22
|
+
import type { ExportDataOptions, ExportTableOptions, ExportTablesXlsxOptions, ExportCsvBatchOptions, ExportXlsxBatchOptions, ExportTablesBatchOptions, DataRow } from '@bsg-export/types';
|
|
82
23
|
/**
|
|
83
24
|
* WASM 导出管理 Composable
|
|
84
25
|
*
|
|
@@ -94,11 +35,11 @@ export declare function useExporter(): {
|
|
|
94
35
|
progress: import("vue").Ref<number, number>;
|
|
95
36
|
/** 错误信息 */
|
|
96
37
|
error: import("vue").Ref<Error | null, Error | null>;
|
|
97
|
-
exportTable: (options: ExportTableOptions) =>
|
|
98
|
-
exportData: (data: DataRow[], options?: ExportDataOptions) =>
|
|
99
|
-
exportTablesXlsx: (options: ExportTablesXlsxOptions) =>
|
|
100
|
-
exportCsvBatch: (options: ExportCsvBatchOptions) => Promise<
|
|
101
|
-
exportXlsxBatch: (options: ExportXlsxBatchOptions) => Promise<
|
|
102
|
-
exportTablesBatch: (options: ExportTablesBatchOptions) => Promise<
|
|
38
|
+
exportTable: (options: ExportTableOptions) => boolean;
|
|
39
|
+
exportData: (data: DataRow[], options?: ExportDataOptions) => boolean;
|
|
40
|
+
exportTablesXlsx: (options: ExportTablesXlsxOptions) => boolean;
|
|
41
|
+
exportCsvBatch: (options: ExportCsvBatchOptions) => Promise<boolean>;
|
|
42
|
+
exportXlsxBatch: (options: ExportXlsxBatchOptions) => Promise<boolean>;
|
|
43
|
+
exportTablesBatch: (options: ExportTablesBatchOptions) => Promise<boolean>;
|
|
103
44
|
};
|
|
104
45
|
//# sourceMappingURL=use-exporter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-exporter.d.ts","sourceRoot":"","sources":["../src/use-exporter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"use-exporter.d.ts","sourceRoot":"","sources":["../src/use-exporter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,KAAK,EAEV,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,EAExB,OAAO,EACR,MAAM,mBAAmB,CAAC;AAyB3B;;;;;GAKG;AACH,wBAAgB,WAAW;IA+IvB,oBAAoB;;IAEpB,aAAa;;IAEb,mBAAmB;;IAEnB,WAAW;;2BAnFiB,kBAAkB;uBAetB,OAAO,EAAE,YAAY,iBAAiB;gCAU7B,uBAAuB;8BAWnB,qBAAqB;+BAepB,sBAAsB;iCAcpB,wBAAwB;EA2BnE"}
|
package/dist/use-exporter.js
CHANGED
|
@@ -35,35 +35,39 @@ function useExporter() {
|
|
|
35
35
|
};
|
|
36
36
|
};
|
|
37
37
|
const wrapSync = (fn) => {
|
|
38
|
-
if (!initialized.value || !wasmModule) return;
|
|
38
|
+
if (!initialized.value || !wasmModule) return false;
|
|
39
39
|
loading.value = true;
|
|
40
40
|
progress.value = 0;
|
|
41
41
|
error.value = null;
|
|
42
42
|
try {
|
|
43
43
|
fn();
|
|
44
44
|
if (mounted) progress.value = 100;
|
|
45
|
+
return true;
|
|
45
46
|
} catch (err) {
|
|
46
47
|
if (mounted) error.value = err instanceof Error ? err : new Error(String(err));
|
|
48
|
+
return false;
|
|
47
49
|
} finally {
|
|
48
50
|
if (mounted) loading.value = false;
|
|
49
51
|
}
|
|
50
52
|
};
|
|
51
53
|
const wrapAsync = async (fn) => {
|
|
52
|
-
if (!initialized.value || !wasmModule) return;
|
|
54
|
+
if (!initialized.value || !wasmModule) return false;
|
|
53
55
|
loading.value = true;
|
|
54
56
|
progress.value = 0;
|
|
55
57
|
error.value = null;
|
|
56
58
|
try {
|
|
57
59
|
await fn();
|
|
58
60
|
if (mounted) progress.value = 100;
|
|
61
|
+
return true;
|
|
59
62
|
} catch (err) {
|
|
60
63
|
if (mounted) error.value = err instanceof Error ? err : new Error(String(err));
|
|
64
|
+
return false;
|
|
61
65
|
} finally {
|
|
62
66
|
if (mounted) loading.value = false;
|
|
63
67
|
}
|
|
64
68
|
};
|
|
65
69
|
const exportTable = (options) => {
|
|
66
|
-
wrapSync(() => {
|
|
70
|
+
return wrapSync(() => {
|
|
67
71
|
wasmModule.export_table(
|
|
68
72
|
options.tableId,
|
|
69
73
|
options.filename,
|
|
@@ -76,13 +80,13 @@ function useExporter() {
|
|
|
76
80
|
});
|
|
77
81
|
};
|
|
78
82
|
const exportData = (data, options) => {
|
|
79
|
-
wrapSync(() => {
|
|
83
|
+
return wrapSync(() => {
|
|
80
84
|
const opts = options ? { ...options, progressCallback: options.progressCallback ?? createProgressCallback() } : { progressCallback: createProgressCallback() };
|
|
81
85
|
wasmModule.export_data(data, opts);
|
|
82
86
|
});
|
|
83
87
|
};
|
|
84
88
|
const exportTablesXlsx = (options) => {
|
|
85
|
-
wrapSync(() => {
|
|
89
|
+
return wrapSync(() => {
|
|
86
90
|
wasmModule.export_tables_xlsx(
|
|
87
91
|
options.sheets,
|
|
88
92
|
options.filename,
|
|
@@ -91,7 +95,7 @@ function useExporter() {
|
|
|
91
95
|
});
|
|
92
96
|
};
|
|
93
97
|
const exportCsvBatch = async (options) => {
|
|
94
|
-
await wrapAsync(async () => {
|
|
98
|
+
return await wrapAsync(async () => {
|
|
95
99
|
await wasmModule.export_table_to_csv_batch(
|
|
96
100
|
options.tableId,
|
|
97
101
|
options.tbodyId,
|
|
@@ -104,7 +108,7 @@ function useExporter() {
|
|
|
104
108
|
});
|
|
105
109
|
};
|
|
106
110
|
const exportXlsxBatch = async (options) => {
|
|
107
|
-
await wrapAsync(async () => {
|
|
111
|
+
return await wrapAsync(async () => {
|
|
108
112
|
await wasmModule.export_table_to_xlsx_batch(
|
|
109
113
|
options.tableId,
|
|
110
114
|
options.tbodyId,
|
|
@@ -116,7 +120,7 @@ function useExporter() {
|
|
|
116
120
|
});
|
|
117
121
|
};
|
|
118
122
|
const exportTablesBatch = async (options) => {
|
|
119
|
-
await wrapAsync(async () => {
|
|
123
|
+
return await wrapAsync(async () => {
|
|
120
124
|
await wasmModule.export_tables_to_xlsx_batch(
|
|
121
125
|
options.sheets,
|
|
122
126
|
options.filename,
|