通过js实现纯前端将数据导出excel

参考前辈资料：https://blog.csdn.net/hhzzcc_/article/details/80419396

踩坑：

1、网上有许多纯前端实现数据导出excel，但是好多都是有问题的，比如有实现后下载的文件格式不对，打开的还是html文件，虽然实现了后缀名.xls;

2、引用第三方插件的，不过前提是你的html里的数据必须是table表格，还有页面要引入太多的依赖文件，本人嫌麻烦暂时还没用过；

参考众多前辈的经验，导出的excle是csv格式；

代码如下：

reportExamCard = () => {
  const {exportData} = this.state;

  let arry = [],
    th = document.getElementsByClassName('th');
  for (let i = 0; i < th.length; i++) {
    arry.push((th[i].innerText).replace(/[\r\n]/g, ''));
  }

  //列标题，逗号隔开，每一个逗号就是隔开一个单元格
  let str = arry.join(',') + '\n';
  //增加\t为了不让表格显示科学计数法或者其他格式
  for (let i = 0; i < exportData.length; i++) {
    for (let item in exportData[i]) {
      str += `${exportData[i][item] + '\t'},`;
    }
    str += '\n';
  }
  //encodeURIComponent解决中文乱码
  let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
  //通过创建a标签实现
  let link = document.createElement('a');
  link.href = uri;
  //对下载的文件命名
  link.download =  this.props.areaExam.currentExam.title + '.csv';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

PS:这个不需要考虑你的html里的代码是不是table，因为是csv格式的，只需要传json数据（就是按你页面展示的格式重新组成一个json数据）。json数据里的内容顺序就是按照页面上显示的顺序，还有一个要注意，我的这个数据是通过后台接口获取的，里面的数据比较多，所以要自己处理一下，取自己需要的数据。excel的表头需要另外获取放到开头str(看代码str，arr数组就是单独取的)。

因为是csv格式的，可能你下载的数据里有换行符，一定要过滤掉，不然表格可能就错乱了。

这个不支持office2007版本.

以上就是简要概述，前辈们多多指教。