使用ExcelJS封装一个excel表格的导出

ExcelJS 操作和写入Excel 文件。
直接上代码，js部分：
exportFn.js

1. import ExcelJS from 'exceljs';
2. import { saveAs } from 'file-saver';
4. export function exportExcleUtils(tHeader, filterVal, listData, fileName) {
5.   //设置工作簿属性
6.   const workbook = new ExcelJS.Workbook();
7.   workbook.creator = 'Me';
8.   workbook.lastModifiedBy = 'Her';
9.   workbook.created = new Date();
10.   workbook.modified = new Date();
11.   workbook.lastPrinted = new Date();
12.   //添加工作薄
13.   const worksheet = workbook.addWorksheet('sheet1');
14.   //计算标题宽
15.   let colWidth = calculateColumnWidth(tHeader);
16.   console.log(colWidth);
17.   let style = { alignment: { vertical: 'middle', horizontal: 'center' } };
18.   let columns = [];
19.   for (let i = 0; i < tHeader.length; i++) {
20.     let header = {
21.       header: tHeader[i],
22.       key: filterVal[i] ? filterVal[i] : i + '',
23.       width: colWidth[i] ? colWidth[i] + 20 : 10,
24.       style: JSON.parse(JSON.stringify(style)),
25.     };
26.     columns.push(header);
27.   }
28.   worksheet.columns = columns;
30.   //添加数据
31.   listData.forEach((item) => {
32.     worksheet.addRow(item);
33.   });
35.   worksheet.getRow(1).font = { name: '宋体', family: 4, size: 16, bold: true };
37.   fileName = fileName + '.xlsx';
38.   workbook.xlsx.writeBuffer().then((data) => {
39.     let blob = new Blob([data], {
40.       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
41.     });
42.     saveAs(blob, fileName);
43.   });
44. }
46. export function calculateColumnWidth(tHeader) {
47.   let colWidth = [];
48.   //计算列宽
49.   for (let i = 0; i < tHeader.length; i++) {
50.     if (colWidth[i] && colWidth[i] < tHeader[i].length) {
51.       colWidth[i] = tHeader[i].length * 2;
52.     } else if (colWidth[i] === undefined) {
53.       colWidth[i] = tHeader[i].length * 2;
54.     }
55.   }
56.   return colWidth;
57. }

复制代码

举个栗子：

1. //从公共函数中拿出
2. import { exportExcleUtils } from '@/libs/exportFn';
3. ...
4. ...
5. ...
6. //再写个按钮
7.     <el-button type="primary" @click="exportFn">导出按钮</el-button>
8. ...
9. ...
10. ...
12.     //导出
13.     exportFn() {
14.       let loadingInstance = Loading.service({
15.         text: '正在导出，请稍等...',
16.       });
18.       let table = this.selectedRowArr;
19.                 //表头
20.       let tHeader = [
21.                      'a',
22.                      'b',
23.                      'c',
24.                      'd',
25.       ];
26.                 //数据的里字段
27.       let filterVal = [
28.                 'person',
29.                     'dog',
30.                     'cat',
31.                     'pig',
32.       ];
33.       let fileName = '导出的表文件名';
34.       loadingInstance.close();
35.       exportExcleUtils(tHeader, filterVal, table, fileName);
36.     },

复制代码

PS：上文的selectedRowArr变量是我项目里的，本身去塞数据，数组对象形式

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