本文详解如何利用 sheetjs（xlsx.js）在 javascript 中将图像像素逐个映射为 excel 单元格的背景色，替代仅写入 rgb 文本的做法，实现真正的“彩色像素画导出”。
本文详解如何利用 sheetjs（xlsx.js）在 javascript 中将图像像素逐个映射为 excel 单元格的背景色，替代仅写入 rgb 文本的做法，实现真正的“彩色像素画导出”。
要将图像转换为带颜色的 Excel 表格（即每个单元格显示对应像素的填充色，而非 RGB 字符串），关键在于：SheetJS 支持为单元格设置样式（s 属性），其中 fill.fgColor.rgb 可指定十六进制颜色值（格式为 AARRGGBB，Alpha 通道固定为 FF）。原始代码仅写入字符串值，需改为传入含样式的对象 { v: '', s: style }。
以下是完整、可运行的改造后函数：
function createExcelWorkbook(imageData, width, height) {
const wb = XLSX.utils.book_new();
const wsData = [];
for (let y = 0; y < height; y++) {
const rowData = [];
for (let x = 0; x < width; x++) {
const pixelIndex = (y * width + x) * 4; // RGBA 顺序，取前3通道
const r = imageData[pixelIndex];
const g = imageData[pixelIndex + 1];
const b = imageData[pixelIndex + 2];
// 转为大写十六进制，补零至2位（如 10 → "0A"，255 → "FF"）
const hexR = r.toString(16).padStart(2, '0').toUpperCase();
const hexG = g.toString(16).padStart(2, '0').toUpperCase();
const hexB = b.toString(16).padStart(2, '0').toUpperCase();
const style = {
fill: {
fgColor: { rgb: `FF${hexR}${hexG}${hexB}` } // 必须是8位：AA+RR+GG+BB
}
};
// 单元格值为空字符串，仅靠背景色呈现像素
rowData.push({ v: '', s: style });
}
wsData.push(rowData);
}
// 创建工作表并添加到工作簿
const ws = XLSX.utils.aoa_to_sheet(wsData);
// （可选）自动调整列宽以近似正方形像素（Excel 默认列宽 ≠ 行高）
const colWidth = 2.5; // 经验值，适配多数字体；可按需微调
ws['!cols'] = Array(width).fill({ wch: colWidth });
ws['!rows'] = Array(height).fill({ hpt: 12 }); // 设置行高匹配
XLSX.utils.book_append_sheet(wb, ws, 'PixelArt');
// 导出为 .xlsx 文件（需引入 FileSaver.js）
const blob = XLSX.write(wb, { bookType: 'xlsx', type: 'blob' });
saveAs(blob, `pixel-art-${width}x${height}.xlsx`);
}⚠️ 注意事项与最佳实践：
- Alpha 通道处理：SheetJS 填充色不支持透明度，故 fgColor.rgb 中 Alpha 固定为 FF（完全不透明）。若需保留透明效果，需预处理图像（如用白底合成）。
- 性能提示：高分辨率图像（如 >500×500）将生成海量单元格，可能触发浏览器内存警告或 Excel 打开卡顿；建议限制输入尺寸或提供降采样选项。
- 样式兼容性：fill 属于较新版本 SheetJS（≥0.18.0）支持的样式属性，请确保使用 最新版 xlsx.full.min.js。
- 列宽/行高对齐：Excel 中默认单元格非正方形，通过 ws['!cols'] 和 ws['!rows'] 手动设置可提升像素画视觉保真度（示例中 wch: 2.5 ≈ 18px 宽，hpt: 12 ≈ 16px 高，接近 1:1）。
- 依赖补充：导出需 FileSaver.js 支持，务必在 HTML 中引入 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>。
最终生成的 Excel 文件打开后，每个单元格将以对应像素颜色填充，形成一幅可缩放、可打印、兼容主流办公软件的“电子像素画”。
