vue使用xlsx-js-style导出excel表格、合并表格及设置样式

// 1 安装依赖
npm i -s xlsx-js-style

// 2 vue文件中导入包 
import XLSXST from "xlsx-js-style";

// 3 代码实现
       const workbook = XLSXST.utils.book_new();
        // 创建工作簿
        const worksheet = XLSXST.utils.json_to_sheet(this.getTableData(), { skipHeader: true });
        // 在这里添加样式代码
        for (const key in worksheet) {
          if (worksheet[key] instanceof Object) {
            worksheet[key].s = {
              alignment: {
                vertical: ''center'',
                horizontal: ''center'',
                indent: 0,
                wrapText: true
              },
              font: {
                name: ''宋体'',
                sz: 10,
                color: { rgb: ''#FF000000'' },
                bold: false,
                italic: false,
                underline: false
              },
              border: {
                top: { style: ''thin'' },
                bottom: { style: ''thin'' },
                left: { style: ''thin'' },
                right: { style: ''thin'' }
              }
            }
            if (key === ''A1'') {
              worksheet[key].s.font.sz = 16;
            }
            if (key === ''A2'') {
              worksheet[key].s.alignment.horizontal = ''left'';
            }
            if (key === ''A3'') {
              worksheet[key].s.alignment.horizontal = ''left'';
            }
          }
        }
        // 列宽
        worksheet[''!cols''] = [
          {
            wpx: 100
          },
          {
            wpx: 100
          },
          {
            wpx: 100
          },
          {
            wpx: 100
          },
          {
            wpx: 170
          },
          {
            wpx: 60
          }
        ];
        // 合并前三行   前6列 标题
        worksheet[''!merges''] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } },
          { s: { r: 1, c: 0 }, e: { r: 1, c: 5 } },
          { s: { r: 2, c: 0 }, e: { r: 2, c: 5 } }];
        // 合并第一列 前n行
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].spanRow > 0) {
            // +3 是因为 前三行是写死的 三行标题  +1 是因为第一行是标题头 不需要合并
            const mergeCell = { s: { r: i + 1 + 3, c: 0 }, e: { r: this.tableData[i].spanRow + i + 3, c: 0 } };
            worksheet[''!merges''].push(mergeCell);
          }
        }
        // 合并第二列 前n行
        for (var j = 0; j < this.tableData.length; j++) {
          if (this.tableData[j].spanSecondRow > 0) {
            // +3 是因为 前三行是写死的 三行标题  +1 是因为第一行是标题头 不需要合并
            const mergeCell = { s: { r: j + 1 + 3, c: 1 }, e: { r: this.tableData[j].spanSecondRow + j + 3, c: 1 } };
            worksheet[''!merges''].push(mergeCell);
          }
        }
        XLSXST.utils.book_append_sheet(workbook, worksheet, ''Sheet1'');
        const excelBuffer = XLSXST.write(workbook, { bookType: ''xlsx'', type: ''array'' });
        const blob = new Blob([excelBuffer], { type: ''application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'' });
        saveAs(blob,  ''标题内容.xlsx'');
        
 // 表格有多少行数据 在此处做处理
getTableData () {
      const data = [];
      // 添加三行写死内容
      const one = [ ''医院环境卫生学监测结果'', '''', '''', '''', '''', ''''];
      // 使用 Set 过滤重复的 proName
      const uniqueProNames = new Set(this.tableData.map(item => item.proName));
      // 将 Set 转换为数组，并用逗号拼接字符串
      const joinedString = Array.from(uniqueProNames).join('','');
      const two = [''监测项目:'' + joinedString, '''', '''', '''', '''', ''''];
      const three = [''监测日期:'' + this.$coms.getDate(this.startTime) + ''~'' + this.endTime, '''', '''', '''', '''', ''''];
      data.push(one);
      data.push(two);
      data.push(three);
      // 添加表头
      const head = [''监测项目'', ''监测科室'', ''送检区域'', ''检出结果'', ''参考标准'', ''是否合格''];
      data.push(head);
      this.tableData.forEach((item) => {
        const arr = [item.proName, item.appDeptName, item.monitoringPoint, item.estimatedValue, item.standardValues, item.detectionResult];
        data.push(arr);
      });
      return data;
    },

// 样式 注释
        // alignment（对齐方式）：用于控制文本在单元格内的对齐方式。

        // vertical（垂直对齐）：可以是 "center"（居中对齐）、"top"（顶部对齐）或 "bottom"（底部对齐）。
        // horizontal（水平对齐）：可以是 "center"（居中对齐）、"left"（左对齐）或 "right"（右对齐）。
        // indent（缩进）：用于指定文本的缩进级别，以像素为单位。
        // wrapText（换行）：如果设置为 true，则文本超出单元格宽度时将自动换行。
        // font（字体）：用于指定字体的相关属性。

        // name（字体名称）：可以是常见的字体名称，例如 ''宋体''、''Arial'' 等。
        // sz（字体大小）：指定字体的大小，以磅为单位。
        // color（字体颜色）：可以使用 RGB 值或预定义的颜色名称来设置字体颜色。
        // bold（粗体）：如果设置为 true，则字体将显示为粗体。
        // italic（斜体）：如果设置为 true，则字体将显示为斜体。
        // underline（下划线）：如果设置为 true，则字体将显示为带有下划线。
        // border（边框）：用于设置单元格的边框样式。

        // top、bottom、left、right：分别表示单元格的上、下、左、右边框样式。
        // style（样式）：可以是 "thin"（细线样式）、"medium"（中等线样式）等。


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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137