Excel exporter dependency excel.js It can be used well with table component of antd. It can export excel file easily and quickly by setcolumns () and setdatasource()

中文文档

dev

git clone https://github.com/chaomingd/excel-exporter.git

npm install

npm run start

install

npm install exceljs --save
npm install file-saver --save
npm install table-excel-exporter --save

quik start

import {
  ExcelExporter
} from 'table-excel-exporter'
const columns = [
  {
    title: 'Name',
    dataIndex: 'name'
  },
  {
    title: 'Sex',
    dataIndex: 'sex'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: 30 // Note that the width refers to the number of characters, not the width of PX. Note that if you use the width attribute in the table component of antd, you should not directly process the columns to excel exporter. You need to rewrite the width attribute to an appropriate value, otherwise the generated excel cells will be very wide
  }
]
const dataSource = [
  {
    name: 'leon',
    sex: 'man',
    address: 'xxxxxxxxxxxxx'
  },
  {
    name: 'leon',
    sex: 'man',
    address: 'xxxxxxxxxxxxx'
  },
  {
    name: 'leon',
    sex: 'man',
    address: 'xxxxxxxxxxxxx'
  },
  {
    name: 'leon',
    sex: 'man',
    address: 'xxxxxxxxxxxxx'
  }
]
const excelExporter = new ExcelExporter({
  sheetName: 'person info'
})
excelExporter.setColumns(columns)
excelExporter.setDataSource(dataSource)
excelExporter.exportFile('personInfo.xlsx', () => {
  console.log('done') // Note that clicking save or cancel in the pop-up download box will trigger this function
})

Support tree structure

import {
  ExcelExporter
} from 'table-excel-exporter'
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: '12%',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '30%',
    key: 'address',
  },
];
const data = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];
const excelExporter = new ExcelExporter({
  sheetName: 'person info'
})
excelExporter.setColumns(columns)
excelExporter.setDataSource(dataSource)
excelExporter.exportFile('personInfo.xlsx', () => {
  console.log('done') // Note that clicking save or cancel in the pop-up download box will trigger this function
})

support head group

import {
  ExcelExporter
} from 'table-excel-exporter'
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 10
  },
  {
    title: 'Other',
    children: [
      {
        title: 'Age',
        dataIndex: 'age',
        width: 20
      },
      {
        title: 'Address',
        children: [
          {
            title: 'Street',
            dataIndex: 'street',
            width: 20
          },
          {
            title: 'Block',
            children: [
              {
                title: 'Building',
                dataIndex: 'building',
                width: 10
              },
              {
                title: 'Door No.',
                dataIndex: 'number',
                width: 10
              }
            ],
          },
        ]
      }
    ]
  },
  {
    title: 'Company',
    children: [
      {
        title: 'Company Address',
        dataIndex: 'companyAddress',
        width: 20
      },
      {
        title: 'Company Name',
        dataIndex: 'companyName',
      }
    ]
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    key: 'gender',
    width: 8
  }
];
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: 'John Brown',
    age: i + 1,
    street: 'Lake Park',
    building: 'C',
    number: 2035,
    companyAddress: 'Lake Street 42',
    companyName: 'SoftLake Co',
    gender: 'M',
  })
}
const excelExporter = new ExcelExporter({
  sheetName: 'test'
})
excelExporter.setColumns(columns)
excelExporter.setDataSource(data)
excelExporter.exportFile('test', () => {
  console.log('done')
})

API

1. config

const config = {
  sheetName: 'person info'
}
const excelExporter = new ExcelExporter(config)

| Property | Description | Default | | --------- | ------------ | --------- | | sheetName | The name of the worksheet | undefined |

2. Property

| Property | Description | Type | Default | | ------------------- | ------------------------------------------------------------ | ----------------- | -------- | | workbook | Workbook objects （ExcelJS.Workbook）const workbook = new ExcelJS.Workbook(); | ExcelJS.Workbook | | | worksheet | WorkSheet objects workbook.addWorksheet(sheetName); | ExcelJS.WorkSheet | | | _columns | setcolumns method handles columns after processing | IColumn[] | [] | | _dataSource | the datasource processed by the setdatasource method | IDataSource[] | [] | | _childrenColumnName | property name of children in tree structure | string | children | | _indentSize | the character width of the indent in the tree structure | number | 3 |

// set workbook property  // https://www.npmjs.com/package/exceljs#set-workbook-properties
workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);
// Set workbook dates to 1904 date system
workbook.properties.date1904 = true;

方法

| Property | Description | Type | Default | | ------------- | ---------------------------------- | ------------------------------------------------------------ | ------ | | setColumns | The setting column is the same as antd table columns | (columns: IColumns[]) => void Icolumn is described in detail later | - | | setDataSource | Set the same data source as the antd table datasource | (data: IdataSource, options?: IdataSourceOption) => void It will be described in detail later | - | | exportFile | Export data to excel file | (filename: string, done) => void | - |

IColumn

A data column object is an entry in columns

| Property | Description | Type | Default | | --------- | ------------------------------------------------------------ | ------ | ------ | | title | Column header display text | string | - | | dataIndex | The key corresponding to the column data in the data item supports the nested writing of 'A.B.C' | string | - | | style | Style of column header cells { numFmt, font, alignment, border, fille } 具体设置参考excel.js Style | object | - | | colStyle | Cell style of a column { numFmt, font, alignment, border, fille } Specific setting reference excel.js Style | object | - | | width | Set the width of the column. The unit is not Px, but the number of characters | number | - |

IdataSourceOption When setting the data source, if it is a tree structure table, you can set the indentation

| Property | Description | Type | Default | | ------------------ | ---------------------- | ------ | ---------- | | childrenColumnName | property name of children in tree structure | string | 'children' | | indentSize | the character width of the indent in the tree structure| number | 3 |

excelExporter.setDataSource(dataSource, {
  childrenColumnName: 'children',
  indentSize: 3
})