利用ExcelJS实现excel的前端导出功能(Vue3+TS)

ExcelJS：读取，操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。一个 Excel 电子表格文件逆向工程项目。
github中文文档：https://github.com/exceljs/exceljs/blob/master/README_zh.md
   封装excel.ts工具文件

1. import ExcelJS from 'exceljs'
3. // 导入参数数据类型
4. export interface importExcelType {
5.   // 第 i 张工作表
6.   i?: number;
7.   // 表格表头字段数组
8.   header: readonly any[];
9. }
11. // 导出参数数据类型
12. export interface exportExcelType {
13.   // 数据
14.   data: { [key: string]: any }[];
15.   // 文件名
16.   name: string;
17.   // 表头字段
18.   header: string[];
19.   // 表头字段对应中文
20.   customHeader: string[];
21.   // 工作表名
22.   sheetName?: string;
23.   // 标题
24.   title?: string;
25.   // 小标题
26.   subTitle?: string;
27.   // 工作表保护密码
28.   password?: string;
29.   // 对齐方式
30.   alignment?: Partial<ExcelJS.Alignment>;
31.   // 合并单元格
32.   mergeList?: mergeListType[];
33.   // 标题样式
34.   titleStyle?: Partial<ExcelJS.Row>;
35.   // 小标题样式
36.   subTitleStyle?: Partial<ExcelJS.Row>;
37.   // 表头样式
38.   headerStyle?: Partial<ExcelJS.Row>;
39.   // 单元格统一样式
40.   cellStyle?: Partial<ExcelJS.Row & ExcelJS.Column>;
41. }
43. // 合并单元格数据类型
44. export interface mergeListType {
45.   startRow: number;
46.   startColumn: number;
47.   endRow: number;
48.   endColumn: number;
49. }
51. // exceljs相关方法
52. export class Excel {
53.   blob?: Blob; // 导入的blob文件
54.   worksheet?: ExcelJS.Worksheet;  // 当前工作表
55.   header: string[]; // 表头字段数组
56.   constructor(blob?: Blob) {
57.     this.blob = blob;
58.     this.worksheet = undefined;
59.     this.header = [];
60.   }
62.    // 导出excel，参数信息参考exceljs
63.    // data 数据
64.    // name 文件名
65.    // header 表头字段
66.    // customHeader 表头字段对应中文
67.    // sheetName 工作表名
68.    // title 标题
69.    // subTitle 副标题（日期）
70.    // password 冻结表格密码
71.    // mergeList 合并单元格数组
72.    // titleStyle 标题样式(按需补充方法)
73.    // subTitleStyle 小标题样式(按需补充方法)
74.    // headerStyle 表头字段样式(按需补充方法)
75.    // cellStyle 单元格样式(按需补充方法)
77.   public async exportExcel(options: exportExcelType): Promise<void> {
78.     const {
79.         data,
80.         name,
81.         header,
82.         customHeader,
83.         sheetName = 'sheet1',
84.         title = '',
85.         subTitle = '',
86.         password = '',
87.         mergeList = [],
88.         titleStyle,
89.         subTitleStyle,
90.         headerStyle,
91.         cellStyle } = options;
92.     // 创建工作簿
93.     const workbook = new ExcelJS.Workbook();
94.     workbook.creator = '侃侃';
95.     workbook.created = new Date();
96.     // 添加sheet
97.     this.worksheet = workbook.addWorksheet(sheetName, { properties: { tabColor: { argb: 'FF00FF00' } } });
98.     this.header = header;
99.     // 表头行序号
100.     let headerRowId = 1;
101.     if (!!title) headerRowId++;
102.     if (!!subTitle) headerRowId++;
103.     // 插入单元格数据
104.     this.setCells(data, customHeader, cellStyle);
105.     // 插入大标题
106.     this.getTitle(title, titleStyle);
107.     // 插入小标题
108.     this.getSubTitle(subTitle, subTitleStyle);
109.     // 处理表头
110.     this.setHeaderStyle(headerRowId, data, headerStyle);
111.     // 更多处理
112.     this.handleDealExcel(password, mergeList, headerRowId);
113.     // 导出excel(此处也可用file-saver将blob导出到excel文件  fs.saveAs(blob, name+'.xlsx');)
114.     workbook.xlsx.writeBuffer().then((data) => {
115.       let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
116.       const a = document.createElement('a');
117.       a.href = URL.createObjectURL(blob);
118.       a.download = name + '.xlsx';
119.       document.body.appendChild(a);
120.       a.click();
121.       document.body.removeChild(a);
122.       window.URL.revokeObjectURL(a.href);
123.     });
124.   }
126.    // 合并单元格数组
127.    // merge1 需要合并的行/列起止对象数组1
128.    // 例：[{ startRow: 1, endRow: 1},{ startRow: 10, endRow: 10}]
129.    // merge2 需要合并的列/行起止对象数组2
130.    // 例：[{ startColumn: 1, endColumn: 2 }]
131.    // mergeArr 合并后数组
132.    // 例：[{ startRow: 1, endRow: 1, startColumn: 1, endColumn: 2},{ startRow: 10, endRow: 10, startColumn: 1, endColumn: 2}]
133.   public merge(merge1: Partial<mergeListType>[], merge2: Partial<mergeListType>[]): mergeListType[] {
134.     const mergeArr: any[] = [];
135.     merge1.forEach(item1 => {
136.       mergeArr.push(...merge2.map(item2 => {
137.         return { ...item2, ...item1 };
138.       }))
139.     })
140.     return mergeArr;
141.   }
143.    // 单元格数据处理
144.    // data 表格数据
145.    // customHeader  表头中文字段
147.   private setCells(data: exportExcelType['data'], customHeader: string[], style?: Partial<ExcelJS.Row & ExcelJS.Column>): void {
148.     // 设置列，插入中文表头
149.     const column: Partial<ExcelJS.Column>[] = [];
150.     this.header.forEach((item, index) => {
151.       column.push({
152.         header: customHeader[index],
153.         key: item,
154.         width: style?.width || 25,
155.       })
156.     })
157.     this.worksheet!.columns = column;
158.     // 设置行，添加数据
159.     this.worksheet?.addRows(data);
160.     // 设置行高
161.     this.worksheet?.eachRow({ includeEmpty: true }, (row: any, rowNumber) => {
162.       let maxHeight = 1
163.       row.values.forEach((cur: any) => {
164.         if (cur && typeof cur === 'string') {
165.           const tmp = cur.split('\r\n') // 多行数据以此来作为分割设置行高
166.           const tmpLen = tmp.length
167.           maxHeight = Math.max(tmpLen, maxHeight)
168.         }
169.       })
170.       row.height = style?.height || 20;
171.     })
172.     // 获取每一列数据，再依次对齐
173.     this.worksheet!.columns.forEach(column => {
174.         column.alignment = style?.alignment || { vertical: 'middle', horizontal: 'center', wrapText: true }
175.     })
176.   }
178.    // 添加大标题
179.    // title 标题
180.    // style 标题样式
181.   private getTitle(title: string, style?: Partial<ExcelJS.Row>): void {
182.     if (!!title) {
183.       // 插入标题
184.       this.worksheet?.spliceRows(1, 0, [title]);
185.       this.worksheet?.mergeCells(1, 1, 1, this.header.length);
186.       // 调整标题样式
187.       const titleRow = this.worksheet!.getRow(1);
188.       // 高度
189.       titleRow.height = style?.height || 40;
190.       // 字体设置
191.       titleRow.font = style?.font || {
192.         size: 20,
193.         bold: true
194.       }
195.       // 背景色
196.       titleRow.fill = style?.fill || {
197.         bgColor: {
198.           'argb': 'FFFFFF00'
199.         },
200.         type: 'pattern',
201.         pattern: 'none'
202.       }
203.       // 对齐方式
204.       titleRow.alignment = style?.alignment || {
205.         horizontal: "center",
206.         vertical: "middle"
207.       };
208.     }
209.   }
211.    // 添加小标题
212.    // subTitle 标题
213.    // style 小标题样式
214.   
215.   private getSubTitle(subTitle: string, style?: Partial<ExcelJS.Row>): void {
216.     if (!!subTitle) {
217.       this.worksheet?.spliceRows(2, 0, [subTitle]);
218.       this.worksheet?.mergeCells(2, 1, 2, this.header.length);
219.       // 调整标题样式
220.       const subtitleRow = this.worksheet!.getRow(2);
221.       // 高度
222.       subtitleRow.height = style?.height || 20;
223.       // 字体设置
224.       subtitleRow.font = style?.font || {
225.         size: 14,
226.       }
227.       // 背景色
228.       subtitleRow.fill = style?.fill || {
229.         bgColor: {
230.           'argb': 'FFFFFF00'
231.         },
232.         type: 'pattern',
233.         pattern: 'none'
234.       }
235.       // 对齐方式
236.       subtitleRow.alignment = style?.alignment || {
237.         horizontal: "right",
238.         vertical: "middle"
239.       };
240.     }
241.   }
243.    // 设置表头样式
244.    // num 表头在第几行
245.    // data 总数据
246.    // style 表头样式
248.   private setHeaderStyle(num: number, data: any, style?: Partial<ExcelJS.Row>): void {
249.     // 自动筛选器
250.     this.worksheet!.autoFilter = {
251.       from: {
252.         row: num,
253.         column: 1
254.       },
255.       to: {
256.         row: data.length,
257.         column: this.header.length
258.       }
259.     }
260.     // 给表头添加背景色
261.     let headerRow = this.worksheet!.getRow(num);
262.     headerRow!.height = style?.height || 30;
263.     // 通过 cell 设置背景色，更精准
264.     headerRow?.eachCell((cell) => {
265.       cell.fill = style?.fill || {
266.         type: 'pattern',
267.         pattern: 'solid',
268.         fgColor: { argb: 'dde0e7' },
269.       }
270.       cell.font = style?.font || {
271.         size: 12
272.       }
273.     })
274.   }
275.   
276.    // 其他内容处理
277.    // password 密码
278.    // mergeList 合并行列数组
279.    // headerRowId  表头行序号
281.   private handleDealExcel(password: string, mergeList: mergeListType[], headerRowId: number) {
282.     // 添加工作表保护
283.     if (!!password) {
284.       this.worksheet?.protect(password, {
285.         autoFilter: true,
286.         selectLockedCells: false,
287.       });
288.     }
289.     // 合并单元格
290.     mergeList.forEach(item => {
291.       // 行数为表格数据所在行行数+表头行序号headerRowId
292.       const startRow = item.startRow + headerRowId;
293.       const endRow = item.endRow + headerRowId;
294.       this.worksheet?.mergeCells(startRow, item.startColumn, endRow, item.endColumn);
295.     })
296.     // 冻结前几行
297.     this.worksheet!.views = [
298.       { state: 'frozen', xSplit: 0, ySplit: headerRowId }
299.     ];
300.   }
301. }

复制代码

表格页面调用excel工具文件 

1. // export.vue
2. <template>
3.   <div class="export">
4.     <button @click="exportExcel">导出</button>
5.   </div>
6. </template>
8. <script setup lang="ts">
9. import { Excel } from '@/utils/excel';
10. import { reactive } from 'vue';
11. const tableData = reactive([
12.   { id: 1, name: "张三", age: 18 },
13.   { id: 2, name: "张三", age: 18 }
14. ])
15. const header = ['id', 'name', 'age'];
16. const customHeader = ['序号', '姓名', '年龄'];
17. const exportExcel = () => {
18.   const excel = new Excel();
19.   excel.exportExcel({
20.     name: '表格文件名称',
21.     // title: '表格标题',加入这个标题会导致导出的表格再次导入时数据key值获取不正确
22.     data: tableData,
23.     header,
24.     customHeader
25.   })
26. }
28. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。