パッケージの詳細

react-xlsx-wrapper

AS-Devs609MIT2.6.0

An important tool to make it easy to work with excel file formats. It supports lots of file formats as well. As this an wrapper around JS API for XLSX package. It does supports basic Cell styling as well as width based on characters. etc. Can be used in a

react-xlsx-wrapper, excel-export, xlsx, xls

readme

React-XLSX-wrapper

npm version

A data export library built with and for React, Next.js

Note

Please don't use this package with [2.0.0 - 2.0.7] versions. It has major issues. Either Stick to 1.1.5 or move to 2.0.8 and so on.

Installation

With npm:

npm install --save react-xlsx-wrapper@latest
pnpm add react-xlsx-wrapper@latest
yarn add react-xlsx-wrapper@latest

Code Examples

Excel Props

Prop Type Default Required Description
hideElement bool false false To hide the button & directly download excel file
filename string Download false Excel file name to be downloaded
fileExtension string xlsx false Download file extension [xlsx]
element HTMLElement <button> false Element to download excel file
children React.ReactElement<ExcelSheetProps> null true ExcelSheet Represents data

ExcelSheet Props

Prop Type Default Required Description
name string "" true Sheet name in file
bigHeading ExcelSheetCol undefined false Big Merged Cell Heading
autoFilterForAllColumn boolean false false Auto Filter Generated Based on Colums
data any[] null false Excel Sheet data
dataSet ExcelSheetData[] null false Excel Sheet data
children ExcelColumn null false ExcelColumns

Note: In ExcelSheet props dataSet has precedence over data and children props.

For further types and definitions Read More

Cell Style

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"
fgColor COLOR_SPEC
bgColor COLOR_SPEC
font name "Calibri" // default
sz 11 // font size in points
color COLOR_SPEC
bold true or false
underline true or false
italic true or false
strike true or false
outline true or false
shadow true or false
vertAlign true or false
numFmt "0" // 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
alignment vertical "bottom" or "center" or "top"
horizontal "bottom" or "center" or "top"
wrapText true or false
readingOrder 2 // for right-to-left
textRotation Number from 0 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
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 { style: BORDER_STYLE, color: COLOR_SPEC }
diagonalUp true or false
diagonalDown true 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
  • medium
  • thick
  • dotted
  • hair
  • dashed
  • mediumDashed
  • dashDot
  • mediumDashDot
  • dashDotDot
  • mediumDashDotDot
  • slantDashDot

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

更新履歴

CHANGELOG

This log is intended to keep track of backwards-incompatible changes, including but not limited to API changes and file location changes. Minor behavioral changes may not be included if they are not expected to break existing code.

  • Export NaN values to #NUM! and infinite values to #DIV/0!

v2.6.0

  • Stable Version. Fixed Column Width bugs on xStep Parameter
  • Added New feature to handle auto filter support on the headers. Just add autoFilterForAllColumn to true.
  • Reduced the size of the package. Trying to improve more.

v2.5.0

  • It does support bigHeading properly. From v2.0.9 - v2.4.0 was not stable due to continues work on BigHeading Feature,
  • It does have good default Styling even if you don't pass it.

v2.0.8

  • Stable Version. Older all the version from 2.0.0 has bugs. Please do not use.
  • Export / Import Fixed.
  • All Type Defination has been fixed.

  • 5, #6 Issue resolved.

v2.0.1

  • Fixes few bugs. remove publish scripts from package.json.

v2.0.0

  • Full Project Migrated to Typescript.
  • Support Full Type Safety now.
  • Add Hide Column attribute in dataSet property.

v1.1.6

  • Full Project Migrated to Typescript.
  • Support Full Type Safety now.
  • Add Hide Column attribute in dataSet property.
  • All the imports are now named imports.
  • Examples has updated. Will add screenshots.
  • Readme is changed a little.

v1.1.5

  • Again Data in DataSet set as any[]. Nothing to done now. If need TS, need fully. Expose TS interface as well. Will do that later.

v1.1.4

  • Removed TS config for MultidataSet prop as any. column has some issue. I will check it later...

v1.1.3

  • Removed File Saver as a dependency.

v1.1.2

  • Excel file generating properly

v1.1.1

  • Minor Error Fixed

v1.1.0

  • Minor Error Fixed

v1.0.9

  • Minor Error Fixed

v1.0.8

  • Types changed.
  • I hope to resolve this ts related issue.

v1.0.7

  • Changed the structure.
  • I hope to resolve this ts related issue.

v1.0.6

  • Changed Index.d.ts still, finding out issue.
  • I hope to resolve this ts related issue.

v1.0.5

  • Remove older babel packages
  • Upgraded all bebel packages and config
  • Example Import changed

v1.0.4

  • Remove XLSX package
  • Added xlsx-js-style package instead of tempa-xlsx
  • xlsx-js-style uses XLSX package under the hood (0.18.5 --older public version)
  • Fixed "Prototype Pollution" vulnerability (CVE-2023-30533)
  • Lots of API changes

1.0.3

  • Include local XLSX package (0.19.3) -- Latest
  • trying out styles with XLSX package

1.0.0

  • Initial Build.
  • Fix some type definition.
  • trying out styles with XLSX package.
  • Updrade XLSX package.