ExcelJS

读取，操作并写入电子表格数据和样式到 XLSX。

以下是基本的导出excel的步骤，详细可以githup 阅读使用规范

安装

npm install exceljs

创建工作簿

const workbook=newExcelJS.Workbook();

添加工作表

const workSheet=workbook.addWorksheet('My Sheet');

给工作表添加头（columns）

添加列标题并定义列键和宽度

例如：columns=[{header:'Id',key:'id',width:10},{header:'Name',key:'name',width:32},{header:'D.O.B.',key:'DOB',width:10,outlineLevel:1}];

worksheet.columns=columns

给工作表添加行（dataSource）

可以一行一行添加，worksheet.addRow([3,'Sam',newDate()]);

const rows=[{id:6,name:'Barbara',dob:newDate()}];

也可以一起添加 worksheet.addRows（rows)

读 XLSX

// 从文件读取 const workbook=newExcel.Workbook(); awaitworkbook.xlsx.readFile(filename);

// 从流读取 const workbook=newExcel.Workbook(); awaitworkbook.xlsx.read(stream);

// 从 buffer 加载 const workbook=newExcel.Workbook(); await workbook.xlsx.load(data);

写 XLSX

// 写入文件 const workbook=createAndFillWorkbook(); awaitworkbook.xlsx.writeFile(filename);

// 写入流 await workbook.xlsx.write(stream);

// 写入 bufferconstbuffer=await workbook.xlsx.writeBuffer();

demo(react) 基本的导出应用

import React, { Component } from "react";
import { Button,Table } from 'antd';
import ExcelJS from 'exceljs'
import saveAs from "file-saver";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          width: 100
        },
        {
          title: "姓名",
          dataIndex: "name",
          key: "name"
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age"
        },
        {
          title: "住址",
          dataIndex: "address",
          key: "address"
        },
        {
          title: "出生日期",
          dataIndex: "birthDate",
          key: "birthDate"
        }
      ],
      dataSource: [
        {
          key: "1",
          name: "chenchen",
          age: 32,
          address: "西湖区湖底公园1号",
          birthDate: "2021-03-01"
        },
        {
          key: "2",
          name: "fangfang",
          age: 32,
          address: "西湖区湖底公园2号",
          birthDate: "2020-03-01"
        },
        {
          key: "3",
          name: "lanlan",
          age: 32,
          address: "西湖区湖底公园3号",
          birthDate: "2020-03-01"
        }
      ]
    };
  }
  excelExport = () => {
    var ExcelJSWorkbook = new ExcelJS.Workbook();
    var worksheet = ExcelJSWorkbook.addWorksheet("ExcelJS sheet");
    var columnsData = this.state.columns.map((column) => {
      const width = column.width;
      return {
        header: column.title,
        key: column.dataIndex,
        width: isNaN(width) ? 20 : width / 10
      };
    });
    worksheet.columns = columnsData;
    worksheet.addRows(this.state.dataSource);
   let fileName = `${new Date().valueOf()}`
    ExcelJSWorkbook.xlsx.writeBuffer().then(function (buffer) {
      saveAs(
        new Blob([buffer], { type: "application/octet-stream" }),
        `${fileName}.xlsx`
      );
    });
  };
  render() {
    return (
      <div>
        <Table dataSource={this.state.dataSource} bordered={true} columns={this.state.columns} pagination={false}/>
        <Button text="export" type="danger" onClick={this.excelExport} >导出</Button>
      </div>
    );
  }
}
export default App;