3

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:

enter image description here

Expected Output:

enter image description here

1 Answer 1

4

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.

Sign up to request clarification or add additional context in comments.

2 Comments

I tried doing it with xlsx-populate and I could not build. Is there a problem with using this package in react application?
It is supported in Typescript? I am trying to integrate in react + TypeScript, working fine but need to pass any. Main concern in sheetData type, we are getting sheetData as string[][] but cell value expect only string | number | boolean not an Array value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.