【react】导出 xlsx

/**
  exportExcel方法需要传入的参数
    1、headers --- 表头
    2、data --- 表格数据
    3、name --- 导出表格的名称，默认为导出表格数据
    4、arr --- 数组，每个单元格的大小，每个对象的key只必须是 wpx
    注意，导出表格的格式只能为xlsx，别的格式可能没数据/不支持
 */

import * as XLSX from 'xlsx';

import { message } from 'antd';

let handleExcel = {
  // 导出 Excel
  exportExcel(headers, data, name = '导出表格数据', arr, format = 'xlsx') {
    let fileName = name + '.' + format;
    let headerData = []
    let headerDataLen = headers&&headers.length > 0 ? headers.length : 0
    for(var i = 0; i < headerDataLen; i++) {
      headerData.push({wpx: 100})
    }
    // 单元格的大小
    let wpxArr = arr ? arr : headerData;
    const _headers = headers
      .map((item, i) => Object.assign({}, { dataIndex: item.dataIndex, title: item.title, position: i > 25 ? ('A' + String.fromCharCode(65 + i - 26) + 1)  : String.fromCharCode(65 + i) + 1 }))
      .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { dataIndex: next.dataIndex, v: next.title } }), {});
      
    const _data = data
      .map((item, i) => headers.map((dataIndex, j) => Object.assign({}, { content: item[dataIndex.dataIndex], position: j > 25 ? ('A' + String.fromCharCode(65 + j - 26) + (i + 2))  : String.fromCharCode(65 + j) + (i + 2) })))
      // 对刚才的结果进行降维处理（二维数组变成一维数组）
      .reduce((prev, next) => prev.concat(next))
      // 转换成 worksheet 需要的结构
      .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});

　　　// 合并 headers 和 data const output = Object.assign({}, _headers, _data); // 获取所有单元格的位置 const outputPos = Object.keys(output); // 计算出范围 ,["A1",..., "H2"] const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`; // 构建 workbook 对象

    const wb = {
      SheetNames: ['mySheet'],
      Sheets: {
        mySheet: Object.assign(
          {},
          output,
          {
            '!ref': ref.toUpperCase(),//解决Aa2 --> AA2ref.toUpperCase(),//解决Aa2 --> AA2
            '!cols': wpxArr,
          },
        ),
      },
    };

    XLSX.writeFile(wb, fileName, (err) => {
      if (err) {
        message.error(err)
      }
    });
    // return new Promise((resolve, reject) => {
    //   // 导出 Excel
    //   XLSX.writeFile(wb, fileName, (err) => {
    //     if (err) {
    //       reject(err)
    //     } else {
    //       resolve()
    //     }
    //   });
    // })
    
  }
}
module.exports = { handleExcel };

主要是遵循excel的表格式，动态创建每行的内容。

需要注意：

这个是因为没有遵循excel的表头命名格式 需要全部为大写字母

解决：toUpperCase

组件引用

import { handleExcel } from 'tools/handleExcel.js';

　入参示例：

 

 

handleExcel.exportExcel(

this.state.rightColumns, this.state.dataSource, 'xxx表格')

 '!ref': ref.toUpperCase(),//解决Aa2 --> AA2

Sheets: {
        mySheet: Object.assign(
          {},
          output,
          {
            '!ref': ref.toUpperCase(),//解决Aa2 --> AA2
            '!cols': wpxArr,
          },
        ),
      },

官方文档：https://www.npmjs.com/package/xlsx