A tool to export dataset from react to excel format.
npm install react-export-excel-fixed-xlsx
A export to excel library built with and for React.
With yarn:
``sh`
yarn add react-export-excel
With npm:
`sh`
npm install react-export-excel --save
- Simple Excel Export
- Excel Export with Dataset
- Excel Export with Custom Download Button
- Excel Export with custom cells style
| Prop | Type | Default | Required | Description |
| :------------ | :------------------ | :--------- | :------- | :------------------------------------------------ |
| hideElement | bool | false | false | To hide the button & directly download excel file |string
| filename | | Download | false | Excel file name to be downloaded |string
| fileExtension | | xlsx | false | Download file extension [xlsx] |HTMLElement
| element | |
| Prop | Type | Default | Required | Description |
| :------- | :---------------------- | :------ | :------- | :----------------- |
| name | string | "" | true | Sheet name in file |array
| data |
Note: In ExcelSheet props dataSet has precedence over data and children props.
For further types and definitions Read More
Cell styles are specified by a style object that roughly parallels the OpenXML structure. The style object has five
top-level attributes: fill, font, numFmt, alignment, and border.
| Style Attribute | Sub Attributes | Values |
| :-------------- | :------------- | :-------------------------------------------------------------------------------------------- |
| fill | patternType | "solid" or "none" |COLOR_SPEC
| | fgColor | |COLOR_SPEC
| | bgColor | |"Calibri"
| font | name | // default |"11"
| | sz | // font size in points |COLOR_SPEC
| | color | |true
| | bold | or false |true
| | underline | or false |true
| | italic | or false |true
| | strike | or false |true
| | outline | or false |true
| | shadow | or false |true
| | vertAlign | or false |"0"
| numFmt | | // integer index to built in formats, see StyleBuilder.SSF property |"0.00%"
| | | // string matching a built-in format, see StyleBuilder.SSF |"0.0%"
| | | // string specifying a custom format |"0.00%;\\(0.00%\\);\\-;@"
| | | // string specifying a custom format, escaping special characters |"m/dd/yy"
| | | // string a date format using Excel's format notation |"bottom"
| alignment | vertical | or "center" or "top" |"bottom"
| | horizontal | or "center" or "top" |true
| | wrapText | or false |2
| | readingOrder | // for right-to-left |0
| | textRotation | Number from to 180 or 255 (default is 0) |90
| | | is rotated up 90 degrees |45
| | | is rotated up 45 degrees |135
| | | is rotated down 45 degrees |180
| | | is rotated down 180 degrees |255
| | | is special, aligned vertically |{ style: BORDER_STYLE, color: COLOR_SPEC }
| border | top | |{ style: BORDER_STYLE, color: COLOR_SPEC }
| | bottom | |{ style: BORDER_STYLE, color: COLOR_SPEC }
| | left | |{ style: BORDER_STYLE, color: COLOR_SPEC }
| | right | |{ style: BORDER_STYLE, color: COLOR_SPEC }
| | diagonal | |true
| | diagonalUp | or false |true
| | diagonalDown | or false |
COLOR_SPEC: Colors for fill, font, and border are specified as objects, either:
- { auto: 1} specifying automatic values{ rgb: "FFFFAA00" }
- specifying a hex ARGB value{ theme: "1", tint: "-0.25"}
- specifying an integer index to a theme color and a tint value (default 0){ indexed: 64}
- default value for fill.bgColor
BORDER_STYLE: Border style is a string value which may take on one of the following values:
- thin
-
-
-
-
-
-
-
-
-
-
-
Borders for merged areas are specified for each cell within the merged area. So to apply a box border to a merged area of 3x3 cells, border styles would need to be specified for eight different cells:
- left borders for the three cells on the left,
- right borders for the cells on the right
- top borders for the cells on the top
- bottom borders for the cells on the left
This library uses file-saver and xlsx and using json-loader will do the magic for you.
`javascript``
///webpack.config.js
vendor: [
.....
'xlsx',
'file-saver'
],
.....
node: {fs: 'empty'},
externals: [
{'./cptable': 'var cptable'},
{'./jszip': 'jszip'}
]