如何修改JS代码实现Excel单元格按图片像素填充背景色？

原生SheetJS（xlsx包）不支持单元格样式设置，你需要改用支持样式的衍生库xlsx-style来实现背景色填充。以下是修改后的完整方案：

1. 安装依赖 #

首先替换原有的xlsx包为xlsx-style：

npm install xlsx-style

如果是浏览器环境，可以直接引入CDN版本：

<script src="https://unpkg.com/xlsx-style@0.8.13/dist/xlsx.full.min.js"></script>

2. 修改核心代码 #

将原函数修改为以下形式，实现单元格背景色填充，并优化显示效果：

function createExcelWorkbook(imageData, width, height) {
    const wb = XLSX.utils.book_new();
    const wsData = [];
    // 配置列宽（每个单元格宽度设为2px，贴近像素大小）
    const cols = Array(width).fill({ wpx: 2 });
    // 配置行高（每个单元格高度设为15px，贴近像素大小）
    const rows = Array(height).fill({ hpx: 15 });

    for (let y = 0; y < height; y++) {
        const rowData = [];
        for (let x = 0; x < width; x++) {
            const pixelIndex = (y * width + x) * 4;
            const red = imageData[pixelIndex];
            const green = imageData[pixelIndex + 1];
            const blue = imageData[pixelIndex + 2];
            
            // 将RGB值转为SheetJS要求的6位十六进制字符串（无#前缀）
            const hexColor = ((red << 16) | (green << 8) | blue)
                .toString(16)
                .padStart(6, '0');

            // 创建带样式的单元格：可选择保留RGB文本或留空
            rowData.push({
                v: `RGB(${red}, ${green}, ${blue})`, // 可选：保留RGB文本，也可设为''
                s: {
                    // 设置单元格背景色
                    fill: {
                        fgColor: { rgb: hexColor }
                    },
                    // 可选：添加细边框，消除单元格间空隙
                    border: {
                        top: { style: 'thin' },
                        bottom: { style: 'thin' },
                        left: { style: 'thin' },
                        right: { style: 'thin' }
                    }
                }
            });
        }
        wsData.push(rowData);
    }

    // 将数组转换为工作表
    const ws = XLSX.utils.aoa_to_sheet(wsData);
    // 应用列宽和行高配置
    ws['!cols'] = cols;
    ws['!rows'] = rows;

    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(wb, ws, 'Image Pixels');

    // 导出Excel文件（Node.js环境）
    XLSX.writeFile(wb, 'image-pixels.xlsx');

    // 如果是浏览器环境，改用以下代码导出（无需额外依赖）
    /*
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'image-pixels.xlsx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    */
}

关键要点说明 #

• 样式支持：原生xlsx包没有样式API，必须使用xlsx-style或SheetJS Pro（付费）才能设置单元格背景色。
• 颜色格式：SheetJS的样式中，背景色要求是不带#前缀的6位十六进制字符串，因此需要将RGB值转换为对应格式。
• 单元格尺寸：默认Excel单元格尺寸过大，设置wpx（列宽像素）和hpx（行高像素）可以让单元格更贴近原始像素的大小，避免图片变形。
• 边框优化：添加细边框可以消除单元格之间的空白间隙，让像素拼接更接近原图效果。

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