在制作报表时，为单元格设置背景颜色可以突出标题和重点数据，为工作表设置背景图片则能让整张报表更有辨识度。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成这两类设置，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

本文介绍两个核心功能点：

• 设置单元格背景颜色
• 设置工作表背景图片

有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。

设置单元格背景颜色

为单元格设置背景颜色可以突出显示表头、重要数据或特定区域。Spire.XLS for JavaScript 通过 CellRange.Style.Color 属性为单元格或单元格区域设置背景颜色，支持丰富的内置颜色。具体操作步骤如下：

1. 创建 Workbook 对象，并使用 LoadFromFile() 方法加载 Excel 文档。
2. 通过 Workbook.Worksheets.get() 方法获取指定工作表。
3. 使用 CellRange.Style.Color 属性为指定单元格区域设置背景颜色。
4. 通过 Workbook.SaveToFile() 方法保存文档到指定路径。

下面是一个完整的代码示例，展示了在 React 中为单元格区域设置背景颜色：

function App() {
  const setBackgroundColor = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

    // 检查模块是否就绪
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // 将字体和 Excel 文件载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SetBackgroundColor.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表
    const sheet = workbook.Worksheets.get(0);

    // 将表头行设置为黄色背景
    sheet.Range.get("A1:E1").Style.Color = xlsModule.Color.get_Yellow();

    // 将前两行数据设置为浅蓝色背景
    sheet.Range.get("A2:E2").Style.Color = xlsModule.Color.get_LightSkyBlue();
    sheet.Range.get("A3:E3").Style.Color = xlsModule.Color.get_LightSkyBlue();

    // 保存文档
    const outputFileName = 'SetBackgroundColor_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    workbook.Dispose();

    // 从 VFS 读取转换后的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Set Cell Background Color</h1>
      <button onClick={setBackgroundColor}>
        Start
      </button>
    </div>
  );
}

export default App;

设置背景颜色后，表头行显示为黄色背景，前两行数据显示为浅蓝色背景，可以直观地区分不同区域的单元格。

设置工作表背景图片

除了为单元格设置背景颜色，还可以为整个工作表设置背景图片，让报表更具辨识度。Spire.XLS for JavaScript 通过 Worksheet.PageSetup.BackgroundImage 属性将图片设置为工作表背景。具体操作步骤如下：

1. 创建 Workbook 对象，并使用 LoadFromFile() 方法加载 Excel 文档。
2. 通过 Workbook.Worksheets.get() 方法获取指定工作表。
3. 使用 Stream 对象读取要作为背景的图片文件。
4. 使用 Worksheet.PageSetup.BackgroundImage 属性将图片设置为工作表背景。
5. 通过 Workbook.SaveToFile() 方法保存文档到指定路径。

下面是一个完整的代码示例，展示了在 React 中为工作表设置背景图片：

function App() {
  const setBackgroundImage = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

    // 检查模块是否就绪
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // 将字体、图片和 Excel 文件载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const backgroundImageName = 'Background.png';
    await window.spire.FetchFileToVFS(backgroundImageName, '', `${process.env.PUBLIC_URL}data/`);
    const inputFileName = 'SetBackgroundColor.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表
    const sheet = workbook.Worksheets.get(0);

    // 以流的形式打开图片
    const bm = new xlsModule.Stream(backgroundImageName);

    // 将图片设置为工作表背景
    sheet.PageSetup.BackgroundImage = bm;

    // 保存文档
    const outputFileName = 'SetBackgroundImage_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    workbook.Dispose();

    // 从 VFS 读取转换后的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Set Worksheet Background Image</h1>
      <button onClick={setBackgroundImage}>
        Start
      </button>
    </div>
  );
}

export default App;

设置背景图片后，图片会作为工作表背景铺满在工作表后方，单元格内容和数据仍清晰显示在图片之上。

常见问题

设置背景颜色后，保存再打开颜色丢失

原因：Style.Color 属性设置的是单元格的背景（填充）颜色，而不是字体颜色。如果设置的颜色被其他样式覆盖，或者没有正确设置填充模式，颜色可能无法正常显示。

解决：直接为单元格区域设置颜色即可，例如 sheet.Range.get("A1:E1").Style.Color = xlsModule.Color.get_Yellow();。如果希望使用带图案的填充，可以结合 Style.Interior.FillPattern 和 Style.Interior.Gradient 一起使用。

背景图片没有显示在数据上方

原因：工作表背景图片始终显示在单元格内容的后方，仅作为背景装饰，不会被数据遮挡或遮挡数据。

解决：这是正常的显示层级关系。如果需要让图片显示在数据之上，请使用 Worksheet.Pictures.Add() 方法在工作表中插入浮动图片，而不是设置工作表背景。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。