前端纯js实现数据导出Excel文件

简介

通常我们前端导出Excel文件都是通过后端返回的一个url地址给前端，然后前端这边可以通过axios流式下载变成一个excel文件，或者是将url地址放在一个a标签里，然后用户点击a标签时浏览器就会调用自身的下载功能进行下载了。 {% note info orange %} 但是最近项目就遇到了一个问题，后端这边将数据直接返回给前端这边了，前端这边将数据渲染成一个表格，然后导出的时候用前端的方式去导出一个Excel.csv的文件(csv本质上也是excel文件)，之前也没做过这种，感觉好像挺难的,后来百度一下(万能的百度)，发现实现也挺简单的(不多说，ctrl v + ctrl c )，然后再结合自身项目要求改一下就行了！为了方便下次查阅使用，写成md自己记下来。 {% endnote %}

导出

这是页面大概样式 excel 导出按钮功能代码

  const handleExport = () => {
    // 将自己想要导出的字段将它格式化
    const tempList = infiniteList.map((item) => ({
      Id: item.id, Name: item.name, Email: item.email, Location: item.address.country, Phone: item.phone
    }));
    let str = 'Id,Name,Email,Location,Phone\n';
    // 增加\t为了不让表格显示科学计数法或者其他格式
    for (let i = 0; i < tempList.length; i++) {
      // eslint-disable-next-line no-restricted-syntax
      for (const item in tempList[i]) {
        str += `${`${tempList[i][item]}\t`},`;
      }
      str += '\n';
    }
    // encodeURIComponent解决中文乱码
    const uri = `data:text/csv;charset=utf-8,\ufeff${encodeURIComponent(str)}`;
    // 通过创建a标签实现
    const link = document.createElement('a');
    link.href = uri;
    // 对下载的文件命名
    link.download = 'json数据表.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

导出的excel文件 export-excel