本文详解如何利用 sheetjs（xlsx.js）将图像逐像素转换为 excel 表格，并为每个单元格设置对应 rgb 背景色，而非仅写入文本值。
本文详解如何利用 sheetjs（xlsx.js）将图像逐像素转换为 excel 表格，并为每个单元格设置对应 rgb 背景色，而非仅写入文本值。
在使用 JavaScript 和 SheetJS 将图像渲染为 Excel 表格时，关键在于理解：SheetJS 支持通过单元格样式（s 属性）定义填充色（fill.fgColor.rgb），但需注意格式规范——Excel 的 rgb 值为 8 位十六进制字符串（共 6 位），且必须前置 FF 表示不透明度（Alpha = 255），即 FFRRGGBB 格式。
以下为完整、可运行的实现逻辑：
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 每像素 4 字节
const r = imageData[pixelIndex];
const g = imageData[pixelIndex + 1];
const b = imageData[pixelIndex + 2];
// 构建 8 位十六进制颜色值：FF + RR + GG + BB（全部大写、补零）
const hexColor = `FF${r.toString(16).padStart(2, '0')
}${g.toString(16).padStart(2, '0')
}${b.toString(16).padStart(2, '0')}`.toUpperCase();
// 定义带背景色的空单元格（v: '' 可留空；也可设为任意占位符如 '■'）
rowData.push({
v: '', // 值为空，仅靠颜色呈现
s: {
fill: {
fgColor: { rgb: hexColor }
}
}
});
}
wsData.push(rowData);
}
// 将二维数组转为工作表，并添加到工作簿
const ws = XLSX.utils.aoa_to_sheet(wsData);
// 【重要】强制设置列宽与行高，避免颜色被压缩不可见
const colWidth = 3; // Excel 中最小列宽约为 3（单位：字符）
const rowHeight = 20; // 推荐行高（单位：点）
ws['!cols'] = Array(width).fill({ wch: colWidth });
ws['!rows'] = Array(height).fill({ hpt: rowHeight });
XLSX.utils.book_append_sheet(wb, ws, 'ImagePixels');
// 导出为 .xlsx 文件（需引入 FileSaver.js）
const blob = XLSX.write(wb, { bookType: 'xlsx', type: 'blob' });
saveAs(blob, 'pixel-art.xlsx');
}✅ 关键要点说明：
- fgColor.rgb 必须是长度为 8 的大写十六进制字符串（如 FF8000FF），前两位 FF 固定表示不透明；
- 单元格值 v 设为空字符串 '' 即可，颜色由 s.fill 控制；若需视觉对齐，可统一设置 alignment: { horizontal: 'center', vertical: 'center' }；
- 默认列宽/行高过小会导致颜色块不可见，务必通过 ws['!cols'] 和 ws['!rows'] 显式设置；
- 需额外引入 FileSaver.js 才能调用 saveAs() 下载 Blob；
- 若图像含 Alpha 通道（A ≠ 255），SheetJS 不支持透明填充，建议预处理为纯 RGB 或忽略 Alpha（如本例中未使用 imageData[pixelIndex + 3]）。
最终生成的 Excel 文件将以真实像素色彩精准还原图像，适用于数据可视化、像素艺术导出或教学演示等场景。
