react 怎么获取表格_react 实现导出表格

使用js-xlsx实现该导出功能

项目背景：ant + react

概要：给js-xlsx传入他想要的数据结构，则直接生成对应的文件。

import exportExcel from './exportExcel';

render() {

const initColumn = [{

title: '工号',

dataIndex: 'employeeNo',

key: 'employeeNo',

className: 'text-monospace',

}, {

title: '姓名',

dataIndex: 'employeeName',

key: 'employeeName',

}, {

title: '部门',

dataIndex: 'org',

key: 'org',

width: 300,

computed: record => record.org.substring(6),

}, {

title: 'Code',

dataIndex: 'processShortCode',

key: 'processShortCode',

className: 'text-monospace',

}, {

title: '假期类型',

dataIndex: 'leaveTypeLabel',

key: 'leaveTypeLabel',

}, {

title: '天数',

dataIndex: 'days',

key: 'days',

className: 'text-monospace text-right',

}, {

title: '事由',

dataIndex: 'subject',

key: 'subject',

width: 200,

}, {

title: '开始时间',

dataIndex: 'startTime',

key: 'startTime',

className: 'text-monospace',

}, {

title: '结束时间',

dataIndex: 'endTime',

key: 'endTime',

className: 'text-monospace',

}];

}

// attendanceInfoList 原始数据 Arr

type="primary"

onClick={() => exportExcel(initColumn, attendanceInfoList)}>

导出

import XLSX from 'xlsx';

function exportExcel(headers, data, fileName = '请假记录表.xlsx') {

const _headers = headers

.map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))

.reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});

const _data = data

.map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: 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,

'!cols': [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }],

},

),

},

};

// 导出 Excel

XLSX.writeFile(wb, fileName);

}

export default exportExcel;

后期疑问：

1、为什么需要我了解那么多细节，还要各种循环，不能直接一个数据扔进去然后返回一个表格吗？

答：后期查看Util中的文档，可是实现。

const wb = XLSX.utils.book_new();

/*

wb 是work book的缩写

wb = {

SheetNames: [],

Sheets: {}

}

*/

const aoaData = [

["this row should be", "hidden"],

["Hello", "World"]

]

// aoa_to_sheet 将JS数据数组的数组转换为工作表

const aoaWs = XLSX.utils.aoa_to_sheet(aoaData);

const jsonData = [ { "agentNo":"324234", "subName":"30, Jul 2013 09:24 AM" }, { "agentNo":"444443", "subName":"30, Jul 2013 09:24 AM", "other": "111" } ]

// json_to_sheet 将JS对象数组转换为工作表

const jsonWs = XLSX.utils.json_to_sheet(jsonData);

// 将aoaWs 数据放入xlsx文件中的第一个tab，tab名为aoaWs

XLSX.utils.book_append_sheet(wb, aoaWs, 'aoaWs');

// 将jsonWs 数据放入xlsx文件中的第二个tab，tab名为jsonWs

XLSX.utils.book_append_sheet(wb, jsonWs, 'jsonWs');

XLSX.writeFile(wb, fileName);

2、控制显示数据

// TODO：

let ws = wb.Sheets.aoaWs;

let range = XLSX.utils.decode_range(ws["!ref"]);

ws["!ref"] = XLSX.utils.encode_range(range);