javascript - Reactjs - Export to Excel using xlsx.utils.json_to_sheet - Stack Overflow

admin管理员组

文章数量:1355758

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

Share Improve this question Follow edited Mar 29, 2021 at 11:58 Ayaz asked Mar 29, 2021 at 11:21 AyazAyaz 2,13144 gold badges1717 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptReactjsExport to Excel using xlsxutilsjsontosheetStack Overflow