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
<Button
      type="primary"
      onClick={() => exportExcel(initColumn, attendanceInfoList)}>
      导出
</Button>
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);

注:
java后端实现导出Excel csv文件见https://www.jianshu.com/p/39d481fac883

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容