前端实现导出表格数据为xlsx

直切正题

只要就是用了a标签的属性

    exportData(){
      if(this.didTbData.length === 0) {
        this.$Message('要导出的数据为空');
        return;
      }
      const url = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(this.createExcel());
      const link = document.createElement('a');
      link.href = url;
      link.download =  `${moment().format('YYYY-MM-DD')}表格导出测试.xlsx`;
      link.click();
    },
     createExcel() {
      let that = this;
      let tbTitle = [
        {
          name: 'examNo',
          label: '体检编号',
          style: 'style="mso-number-format:\'\\@\'";',
        },
        { name: 'fullName', label: '姓名' },
        {
          name: 'genderCode',
          label: '性别',
          handle: function (a) {
            return that.sexListMap.get(a.genderCode) || '';
          },
        },
        { name: 'age', label: '年龄' },
        { name: 'telephoneNo', label: '联系电话' },
        {
          name: 'idcardTypeCode',
          label: '证件类型',
          handle: function (a) {
            return that.idcardtypeMap.get(a.idcardTypeCode) || '';
          },
        },
        {
          name: 'idcardNo',
          label: '证件号',
          style: 'style="mso-number-format:\'\\@\'";',
        },
        {
          name: 'peCompanyGroupId',
          label: '体检来源',
          handle: function (a) {
            return a.peCompanyGroupId ? '团检' : '个检';
          },
        },
        {
          name: 'criticalSourceCode',
          label: '异常结果来源',
          handle: function (a) {
            return that.criticalsourceMap.get(a.criticalSourceCode) || '';
          },
        },
        { name: 'peVipLevelCode', label: '身份类型',
          handle: function (a) {
            return that.viplevelMap.get(a.peVipLevelCode) || '';
          }, },
        { name: 'peCategoryName', label: '体检类型' },
        { name: 'orgName', label: '单位名称' },
        {
          name: 'peEncounterStatus',
          label: '体检状态',
          handle: function (a) {
            return that.encounterstatustypeMap.get(a.peEncounterStatus) || '';
          },
        },
        { name: 'createdAt', label: '重要异常结果创建日期' },
        {
          name: 'criticalLevel',
          label: '严重级别',
          handle: function (a) {
            return that.critivalLevelMap.get(a.criticalLevel) || '';
          },
        },
        { name: 'peItemName', label: '体检项目名称' },
        { name: 'criticalValue', label: '危害值结果' },
      ];

      let demo = '';
      tbTitle.map((item) => (demo += '' + item.label + ''));
      let title = '' + demo + '';

      let body = '';
      let line;
      this.didTbData.forEach((item) => {
        // eslint-disable-next-line no-useless-escape
        let demo1 = '';
        tbTitle.map(
          (item1) =>
            (demo1 += `${item1.style ? item1.style : null}>${
              item1.handle ? item1.handle(item) : item[item1.name] || ''
            }`)
        );
        demo1 = `${demo1}`;
        line = demo1;
        body = body + line;
      });
      return `${title}${body}`;
    },
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

以示参考，不清楚的有意见的可提问留言