使用xlsx-js-style为SheetJS单元格设置样式失败求助

问题描述 #

使用SheetJS社区版结合xlsx-js-style为Excel单元格添加样式时，SheetJS能正常生成文件，但设置的单元格样式完全不生效，且无任何报错。相关代码如下（无效部分为//style A1 cell注释下的代码）：

//define column order
var headers = ["fullname", "currentcompany", "currentjobtitle", "statusid", "location", "comments", "linkedinurl", "mobilenumber", "email"]

//create worksheet and workbook
var ws = XLSX.utils.json_to_sheet(filteredProfiles, { header: headers, origin: "A4" });
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

//add custom header names
let Heading = [['Name', 'Company', 'Title', 'Status', 'Location', 'Comments', 'Profile', 'Phone', 'Email']];
XLSX.utils.sheet_add_aoa(ws, Heading, { origin: 'A4' });

//set cols/rows width and height
ws['!cols'] = [];
ws['!rows'] = [];

ws['!cols'] = [
    { 'width': 30 }, // width for col A
    { 'width': 30 }, // width for col B
];

ws['!rows'] = [
    { 'hpt': 60 },// height for row 1
    { 'hpt': 20 },]; //height for row 2


//add title in A1
XLSX.utils.sheet_add_aoa(ws, [
    ["Recent profiles"]
], { origin: "A1" });

//define current date
let today = new Date();
let dd = String(today.getDate()).padStart(2, '0');
let MM = String(today.getMonth() + 1).padStart(2, '0');
let yyyy = today.getFullYear();

//add current date in A2
XLSX.utils.sheet_add_aoa(ws, [
    [`${dd}/${MM}/${yyyy}`]
], { origin: "A2" });


//style A1 cell
ws["A1"].s = {
    font: {
        name: "Calibri",
        sz: 24,
        bold: true,
        color: { rgb: "FFFFAA00" },
    },
};


//generate XLSX file and trigger a download 
XLSX.writeFile(wb, "data.xlsx");

核心原因 #

xlsx-js-style是SheetJS的fork版本，扩展了样式支持，但原生SheetJS的writeFile方法会忽略单元格的s样式属性，只有xlsx-js-style提供的writeFile才能解析并应用这些样式。此外，代码中行高属性使用错误。

解决方案 #

1. 替换依赖模块：确保项目导入的是xlsx-js-style，而非原生SheetJS

   // Node.js环境
   const XLSX = require('xlsx-js-style');
   // 浏览器环境直接引入xlsx-js-style的CDN脚本
   

2. 修正行高属性：将行高的hpt改为hpx（像素单位，更符合前端开发习惯），或确认hpt对应的磅值符合需求

   ws['!rows'] = [
       { 'hpx': 60 },// 行1高度（像素）
       { 'hpx': 20 },// 行2高度（像素）
   ];
   

3. 确保使用xlsx-js-style的写入方法：虽然API名称与原生一致，但必须保证调用的是xlsx-js-style的writeFile，才能触发样式解析逻辑

修改后的完整代码：

//define column order
var headers = ["fullname", "currentcompany", "currentjobtitle", "statusid", "location", "comments", "linkedinurl", "mobilenumber", "email"]

//create worksheet and workbook（使用xlsx-js-style的API）
var ws = XLSX.utils.json_to_sheet(filteredProfiles, { header: headers, origin: "A4" });
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

//add custom header names
let Heading = [['Name', 'Company', 'Title', 'Status', 'Location', 'Comments', 'Profile', 'Phone', 'Email']];
XLSX.utils.sheet_add_aoa(ws, Heading, { origin: 'A4' });

//set cols/rows width and height
ws['!cols'] = [
    { 'width': 30 }, // width for col A
    { 'width': 30 }, // width for col B
];

ws['!rows'] = [
    { 'hpx': 60 },// height for row 1（修正为hpx）
    { 'hpx': 20 },// height for row 2（修正为hpx）
];

//add title in A1
XLSX.utils.sheet_add_aoa(ws, [
    ["Recent profiles"]
], { origin: "A1" });

//define current date
let today = new Date();
let dd = String(today.getDate()).padStart(2, '0');
let MM = String(today.getMonth() + 1).padStart(2, '0');
let yyyy = today.getFullYear();

//add current date in A2
XLSX.utils.sheet_add_aoa(ws, [
    [`${dd}/${MM}/${yyyy}`]
], { origin: "A2" });

//style A1 cell
ws["A1"].s = {
    font: {
        name: "Calibri",
        sz: 24,
        bold: true,
        color: { rgb: "FFFFAA00" },
    },
};

//generate XLSX file and trigger a download（使用xlsx-js-style的writeFile）
XLSX.writeFile(wb, "data.xlsx");

额外注意事项 #

• 不要同时导入原生SheetJS和xlsx-js-style，避免模块冲突
• 设置样式前需确保目标单元格已被创建（比如通过sheet_add_aoa或json_to_sheet生成），否则ws["A1"]会返回undefined

内容的提问来源于stack exchange，提问作者jeff3546