前端表格导出至Excel技术-优快云博客

本文链接：https://blog.youkuaiyun.com/caiminiu/article/details/86483471

  tableToExcel() {
    //要导出的标题
    const columns=[ {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },{
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },{
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      }  ],
        //导出的数据
     const   dataSource=[ {
        key: '1',
        name: 'chenchen',
        age: 32,
        address: '西湖区湖底公园1号'
      },{
        key: '2',
        name: 'fangfang',
        age: 32,
        address: '西湖区湖底公园2号' 
      },{
        key: '3',
        name: 'lanlan',
        gugug:"aaaa",
        age: 32,
        address: '西湖区湖底公园3号'
      } ],
      
    // 处理数据
    let newDataSource = []
      for (let i = 0; i < dataSource.length; i++) {
        let tep = {} as any;
        columns.forEach((filter: any) => {
          tep[filter.dataIndex] = dataSource[i][filter.dataIndex]
        })
        newDataSource.push(tep)
      }
    }
    let str = '<tr>';
    for (let i = 0; i < columns.length; i++) {
      str += `<td>${columns[i].title + '\t'}</td>`;
    }
    str += '</tr>';
    str += '<tr>';
    for (let i = 0; i < newDataSource.length; i++) {
      for (let item in newDataSource[i]) {
        let news = newDataSource[i][item] ? newDataSource[i][item] : "";
        //style="mso-number-format:\'@\'" =>excel科学计数
        str += `<td style="mso-number-format:\'@\'">${news + '\t'}</td>`;
      }
      str += '</tr>';
    }
    var worksheet = linkName?linkName:"sheet"//下载之后excel下标显示名称（linkName是自己定义的名称）
    var uri = 'data:application/vnd.ms-excel;base64,';
    var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
    xmlns:x="urn:schemas-microsoft-com:office:excel" 
    xmlns="http://www.w3.org/TR/REC-html40">
    <head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
      <x:Name>${worksheet}</x:Name>
      <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
      </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
      </head><body><table>${str}</table></body></html>`;
    var base64 = function(s:any) { return window.btoa(unescape(encodeURIComponent(s))) }
    var link = document.createElement("a");
    link.href = uri+base64(template);
    link.download = linkName?linkName:"download.xls";//当前下载的excel名称
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); 
  }