[JavaScript知识库]前端导出ecxel

一般的，下载excel是后端放到服务器上，然后读取文件流，然后给接口，前端直接就下载。
不过，下载excel，给前端excel模板，让前端来实现也可，其插件还是挺好用的。

首先，npm安装插件

npm install -save js-export-excel

代码实现：

1. 引入插件

2. 定义导出的模板（表头、数据等）

3. 定义导出的文件名

4.? 导出成功

?//1. 导入插件

import ExportJsonExcel from 'js-export-excel';?

?//2. 提取方法
 /**
   * 导出车辆档案为excel文件
  */
  exportJsonExcel = () => {
      const { dataSource } = this.state;

      //3. 定义表头，数据
      let option = {}, tableData = [], tableTitle;
      tableTitle = ['姓名', '性别', '天气', '温度(℃)', '时间'];
      if(!dataSource || dataSource.length === 0){
          notification.open({
              message: '没有可供导出的信息',
              placement: 'bottomRight',
              icon: <Icon type="exclamation-circle" />
          });
          return;
      }
      dataSource.map((item) => {
          let objRow = {
              '姓名': item.personName,
              '性别': item.sex,
              '天气': item.sun,
              '温度(℃)': item.temperature,
              '时间': item.date,
             
          };
          tableData.push(objRow);
      });

      //4.下载的表格文件名
      option.fileName = '信息' + (new Date()).getTime();

      option.datas = [
          {
              sheetName: 'Report',      //名字(可有可无)(默认 sheet1)
              sheetData: tableData,     //数据源
              sheetHeader: tableTitle,  //表头数据
              sheetFilter: tableTitle,  //表头数据对应的sheetData数据
          }
      ];

      let toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
  }


//页面显示
 <Button style={{ float: 'left' }} onClick={this.exportJsonExcel}>导出</Button>

官方文档：?js-export-excel - npm

阅读世界，共赴山海

423全民读书节，邀你共读