前端导出Excel 表格（js-export-excel）

**

前端导出Excel 表格（js-export-excel）

**

安装 npm install js-export-excel

封装个方法 DownTable

import ExportJsonExcel from 'js-export-excel';
import Dictionaries from './dictionaries';
//data 为所需要导出的表格数据
//dataTables {key:value} key 为表头数据， value 为每一列data表格的key
//type为区分，后端很多地方使用了type 在取值时做区分使用
const DownTable = (
  data: any[],
  dataTables: {},
  fileName: string = '导出信息',
  type: any = null,
) => {
  console.log('data', data);

  if (data.length == 0) {
    message.error('没有选中数据导出');
    return;
  }
  let option: any = { fileName: '', datas: [] };
  let dataTable = [];
  let header: any[] = [];
  Object.keys(dataTables).forEach((item: any) => {
    header.push(item);
  });

  if (data) {
    for (let i in data) {
      if (data) {
        let obj: any = {};
        //下列Dictionaries 为本地字典查值 如果有值不需要进行本地字典查询 直接使用   obj[item] = data[i][dataTables[item]];
        Object.keys(dataTables).forEach((item: any) => {
          if (dataTables[item] == 'project') {
            obj[item] = Dictionaries.getCascaderName('dict_reg_job', data[i][dataTables[item]]);
          } else if (dataTables[item] == 'source') {
            obj[item] = Dictionaries.getName('dict_source', data[i][dataTables[item]]);
          } else if (dataTables[item] == 'type' && type == 'student') {
            obj[item] = Dictionaries.getName('studentType', data[i][dataTables[item]]);
          } else if (dataTables[item] == 'createTime') {
            obj[item] = moment(data[i][dataTables[item]]).format('YYYY-MM-DD');
          } else {
            obj[item] = data[i][dataTables[item]];
          }
        });
        dataTable.push(obj);
      }
    }
  }
  console.log('dataTable', header);
  option.fileName = fileName; //导出的Excel 文件名
  option.datas = [
    {
      sheetData: dataTable,
      sheetName: 'sheet',
      sheetFilter: header,
      sheetHeader: header, //表头
    },
  ];

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

export default DownTable;

页面使用

<a
                onClick={() => {
                  DownTable(
                  //所需要导出的数据
                    selectedRowsList,
                    {
                      姓名: 'name',
                      报考岗位: 'project',
                      学员类型: 'type',
                      客户来源: 'source',
                      备注: 'description',
                      咨询时间: 'createTime',
                    },
                    '学员信息',
                    'student',
                  );
                }}
              >
                导出数据
              </a>

导出效果