SheetJS with Style! Create Excel spreadsheets with basic styling options using JavaScript.
Install npm:
npm install xlsx-js-styleInstall browser:
<script src="dist/xlsx.bundle.js"></script>- Refer to the SheetJS documentation for core API reference
- Current version of sheetjs used: 0.18.5
// 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 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 |
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 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)
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
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent