1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| <template>
| <PageWrapper title="导出示例" content="根据JSON格式的数据进行导出">
| <BasicTable title="基础表格" :columns="columns" :dataSource="data">
| <template #toolbar>
| <a-button @click="defaultHeader"> 导出：默认头部 </a-button>
| <a-button @click="customHeader"> 导出：自定义头部 </a-button>
| <a-button @click="handleMultipleSheet" danger> 导出多Sheet </a-button>
| </template>
| </BasicTable>
| </PageWrapper>
| </template>
|
| <script lang="ts">
| import { defineComponent } from 'vue';
| import { BasicTable } from '/@/components/Table';
| import { jsonToSheetXlsx } from '/@/components/Excel';
| import { columns, data } from './data';
| import { PageWrapper } from '/@/components/Page';
| import { jsonToMultipleSheetXlsx } from '/@/components/Excel/src/Export2Excel';
|
| export default defineComponent({
| components: { BasicTable, PageWrapper },
| setup() {
| function defaultHeader() {
| // 默认Object.keys(data[0])作为header
| jsonToSheetXlsx({
| data,
| filename: '使用key作为默认头部.xlsx',
| });
| }
|
| function customHeader() {
| jsonToSheetXlsx({
| data,
| header: {
| id: 'ID',
| name: '姓名',
| age: '年龄',
| no: '编号',
| address: '地址',
| beginTime: '开始时间',
| endTime: '结束时间',
| },
| filename: '自定义头部.xlsx',
| json2sheetOpts: {
| // 指定顺序
| header: ['name', 'id'],
| },
| });
| }
|
| function handleMultipleSheet() {
| jsonToMultipleSheetXlsx({
| sheetList: [
| {
| data,
| sheetName: '使用key作为默认头部',
| },
| {
| data,
| header: {
| id: 'ID',
| name: '姓名',
| age: '年龄',
| no: '编号',
| address: '地址',
| beginTime: '开始时间',
| endTime: '结束时间',
| },
| json2sheetOpts: {
| // 指定顺序
| header: ['name', 'id'],
| },
| sheetName: '自定义头部',
| },
| ],
| filename: '多Sheet导出示例.xlsx',
| });
| }
| return {
| defaultHeader,
| customHeader,
| handleMultipleSheet,
| columns,
| data,
| };
| },
| });
| </script>
|
|
