preface

SheetJs is a table-XLSX package designed to help you quickly convert XLSX files into table data or export table data to generate XLSX files.

Main functions:

  • Export Excel supports row/column merging
  • Export Excel to support multiple sheets
  • Export Excel to support simple style Settings
  • Parsing Excel to generate tabular data

Document & demo address: pengchen96. Making. IO/table – XLSX /…

start

The installation

Use NPM or YARN

npm install --save table-xlsx @pengchen/xlsx
# or
yarn add table-xlsx @pengchen/xlsx
Copy the code

Use the CDN

<! * * * * * * * * * * * * * * * * * * * * *
<script crossorigin src="https://unpkg.com/table-xlsx/dist/table-xlsx.development.umd.js"></script>
Copy the code

use

import { exportFile } from "table-xlsx";

const columns = [
  { title: 'name'.dataIndex: 'name' },
  { title: 'age'.dataIndex: 'age' },
  { title: 'address'.dataIndex: 'address'},];const dataSource = [
  { key: '1'.name: 'Hu Yanbin'.age: 32.address: No. 1 Xihu Lake Bottom Park },
  { key: '2'.name: Daniel Hu.age: 42.address: No. 1 Xihu Lake Bottom Park},]; exportFile({ columns, dataSource });Copy the code

Three sample

Row/column merge

When antD sets colSpan or rowSpan to 0 in render, the table will not render.

import { exportFile } from "table-xlsx";

const columns = [
    {
      title: 'name'.dataIndex: 'name'.render: (value, row, index) = > {
        const obj = { children: value, props: {}};if (index === 0) {obj.props.colSpan = 2; }
        returnobj; }}, {title: 'age'.dataIndex: 'age'.render: (value, row, index) = > {
        const obj = { children: value, props: {}};if (index === 0) { obj.props.colSpan = 0; }
        returnobj; }}, {title: 'address'.dataIndex: 'address'.render: (value, row, index) = > {
        const obj = { children: value, props: {}};if (index === 0) { obj.props.rowSpan = 2; }
        if (index === 1) { obj.props.rowSpan = 0; }
        returnobj; }},];const dataSource = [
  { key: '1'.name: 'Hu Yanbin'.age: 32.address: No. 1 Xihu Lake Bottom Park },
  { key: '2'.name: Daniel Hu.age: 42.address: No. 1 Xihu Lake Bottom Park},]; exportFile({ columns, dataSource });Copy the code

More sheet page

Set sheetNames, Columns, and dataSource to a two-dimensional array to export excel files with multiple sheets.

import { exportFile } from "table-xlsx";

const columns = [
  { title: 'name'.dataIndex: 'name' },
  { title: 'age'.dataIndex: 'age' },
  { title: 'address'.dataIndex: 'address'},];const dataSource = [
  { key: '1'.name: 'Hu Yanbin'.age: 32.address: No. 1 Xihu Lake Bottom Park },
  { key: '2'.name: Daniel Hu.age: 42.address: No. 1 Xihu Lake Bottom Park},]; exportFile({sheetNames: ['sheet1'.'sheet2'.'sheet3'].columns: [columns, columns, columns],
  dataSource: [dataSource, dataSource, dataSource],
});
Copy the code

Set the style

Currently, only simple Settings for XLSX cell borders, fonts, alignment, and fill colors are supported

import { exportFile } from "table-xlsx";

const columns = [
  { title: 'name'.dataIndex: 'name' },
  { title: 'age'.dataIndex: 'age' },
  { title: 'address'.dataIndex: 'address'},];const dataSource = [
  { key: '1'.name: 'Hu Yanbin'.age: 32.address: No. 1 Xihu Lake Bottom Park },
  { key: '2'.name: Daniel Hu.age: 42.address: No. 1 Xihu Lake Bottom Park},]; exportFile({ columns, dataSource,cellStyle: {
    borderColorRgb: '333'
  },
  headerCellStyle: {
    fontColorRgb: 'FF8040'
  },
  bodyCellStyle: {
    fillFgColorRgb: 'EEEEE0'}});Copy the code

You can see more examples in the demo documentation by experimenting with editing in the editor below the results.

The last

  • Table – XLSX currently implements simple table export and parsing functions, which will be gradually improved and added more configuration items, such as row height and batch setting style.
  • If you find problems with the documentation or have suggestions on how to improve the documentation or project in general, please feel free to raise Issues or contact me.

If you think it is good, please help to point a Star to support it. Thank you.

Depend on & refer to github.com/SheetJS/she… Github.com/protobi/js-… Ant. The design/components /…