本文详解如何利用 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 <p>⚠️ <strong>注意事项与最佳实践</strong>：</p>
- 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 文件打开后，每个单元格将以对应像素颜色填充，形成一幅可缩放、可打印、兼容主流办公软件的“电子像素画”。
