前端实现导出表格数据为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 += '<td>' + item.label + '</td>'));
      let title = '<tr>' + demo + '</tr>';

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

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