I am using xlsx npm package to export data to excel. The following code is working as expected and data is exported. I need to apply some style as below. Please help.

1. Header should be bold.
2. Header background should be gray
3. Apply border

Import statement

import * as XLSX from 'xlsx';

Code:

var data = [
  {"name":"John", "city": "Seattle"},
  {"name":"Mike", "city": "Los Angeles"},
  {"name":"Zach", "city": "New York"}
];
let header = ["Name", "City"];
const ws = XLSX.utils.book_new();
XLSX.utils.sheet_add_aoa(ws, [header]);
XLSX.utils.sheet_add_json(ws, data, { origin: 'A2', skipHeader: true });
const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
const excelBuffer = XLSX.write(wb, { bookType: fileType, type: 'array', cellStyles:true });
const finalData = new Blob([excelBuffer], { type: fileFormat });
FileSaver.saveAs(finalData, "Data.xlsx");

Actual Output:

Expected Output:

I am using xlsx npm package to export data to excel. The following code is working as expected and data is exported. I need to apply some style as below. Please help.

1. Header should be bold.
2. Header background should be gray
3. Apply border

Import statement

import * as XLSX from 'xlsx';

Code:

var data = [
  {"name":"John", "city": "Seattle"},
  {"name":"Mike", "city": "Los Angeles"},
  {"name":"Zach", "city": "New York"}
];
let header = ["Name", "City"];
const ws = XLSX.utils.book_new();
XLSX.utils.sheet_add_aoa(ws, [header]);
XLSX.utils.sheet_add_json(ws, data, { origin: 'A2', skipHeader: true });
const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
const excelBuffer = XLSX.write(wb, { bookType: fileType, type: 'array', cellStyles:true });
const finalData = new Blob([excelBuffer], { type: fileFormat });
FileSaver.saveAs(finalData, "Data.xlsx");

Actual Output:

Expected Output:

• javascript
• reactjs

1 Answer 1

You cannot do this with xlsx aka SheetJS because it is probably a SheetJS Pro feature.

You can do it with xlsx-populate.

Demo at CodeSandbox.