xlsx-js-style
xlsx-js-style copied to clipboard
gitbrent
SheetJS Community Edition + Basic Cell Styles
xlsx-js-style
âšī¸ About
SheetJS with Style! Create Excel spreadsheets with basic styling options using JavaScript.
đ Installation
Install npm:
npm install xlsx-js-style
Install browser:
<script src="dist/xlsx.bundle.js"></script>
đ Core API
- Refer to the SheetJS documentation for core API reference
- Current version of sheetjs used: 0.18.5
đ Style API
Cell Style Example
// STEP 1: Create a new workbook
const wb = XLSX.utils.book_new();
// STEP 2: Create data rows and styles
let row = [
{ v: "Courier: 24", t: "s", s: { font: { name: "Courier", sz: 24 } } },
{ v: "bold & color", t: "s", s: { font: { bold: true, color: { rgb: "FF0000" } } } },
{ v: "fill: color", t: "s", s: { fill: { fgColor: { rgb: "E9E9E9" } } } },
{ v: "line\nbreak", t: "s", s: { alignment: { wrapText: true } } },
];
// STEP 3: Create worksheet with rows; Add worksheet to workbook
const ws = XLSX.utils.aoa_to_sheet([row]);
XLSX.utils.book_append_sheet(wb, ws, "readme demo");
// STEP 4: Write Excel file to browser
XLSX.writeFile(wb, "xlsx-js-style-demo.xlsx");
Cell Style Properties
- Cell styles are specified by a style object that roughly parallels the OpenXML structure.
- Style properties currently supported are:
alignment,border,fill,font,numFmt.
| Style Prop | Sub Prop | Default | Description/Values |
|---|---|---|---|
alignment |
vertical |
bottom |
"top" or "center" or "bottom" |
horizontal |
left |
"left" or "center" or "right" |
|
wrapText |
false |
true or false |
|
textRotation |
0 |
0 to 180, or 255 // 180 is rotated down 180 degrees, 255 is special, aligned vertically |
|
border |
top |
{ style: BORDER_STYLE, color: COLOR_STYLE } |
|
bottom |
{ style: BORDER_STYLE, color: COLOR_STYLE } |
||
left |
{ style: BORDER_STYLE, color: COLOR_STYLE } |
||
right |
{ style: BORDER_STYLE, color: COLOR_STYLE } |
||
diagonal |
{ style: BORDER_STYLE, color: COLOR_STYLE, diagonalUp: true/false, diagonalDown: true/false } |
||
fill |
patternType |
"none" |
"solid" or "none" |
fgColor |
foreground color: see COLOR_STYLE |
||
bgColor |
background color: see COLOR_STYLE |
||
font |
bold |
false |
font bold true or false |
color |
font color COLOR_STYLE |
||
italic |
false |
font italic true or false |
|
name |
"Calibri" |
font name | |
strike |
false |
font strikethrough true or false |
|
sz |
"11" |
font size (points) | |
underline |
false |
font underline true or false |
|
vertAlign |
"superscript" or "subscript" |
||
numFmt |
0 |
Ex: "0" // integer index to built in formats, see StyleBuilder.SSF property |
|
Ex: "0.00%" // string matching a built-in format, see StyleBuilder.SSF |
|||
Ex: "0.0%" // string specifying a custom format |
|||
Ex: "0.00%;\\(0.00%\\);\\-;@" // string specifying a custom format, escaping special characters |
|||
Ex: "m/dd/yy" // string a date format using Excel's format notation |
COLOR_STYLE {object} Properties
Colors for border, fill, font are specified as an name/value object - use one of the following:
| Color Prop | Description | Example |
|---|---|---|
rgb |
hex RGB value | {rgb: "FFCC00"} |
theme |
theme color index | {theme: 4} // (0-n) // Theme color index 4 ("Blue, Accent 1") |
tint |
tint by percent | {theme: 1, tint: 0.4} // ("Blue, Accent 1, Lighter 40%") |
BORDER_STYLE {string} Properties
Border style property is one of the following values:
dashDotDotdashDotdasheddottedhairmediumDashDotDotmediumDashDotmediumDashedmediumslantDashDotthickthin
Border Notes
Borders for merged areas are specified for each cell within the merged area. For example, 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)
đ Thanks
This project is a fork of SheetJS/sheetjs combined with code from sheetjs-style (by ShanaMaid) and sheetjs-style-v2 (by Raul Gonzalez).
All projects are under the Apache 2.0 License
đ License
Please consult the attached LICENSE file for details. All rights not explicitly granted by the Apache 2.0 License are reserved by the Original Author.
gitbrent