When creating reports, setting background colors for cells highlights headers and key data, and setting a background image for the worksheet makes the whole report more recognizable. Spire.XLS for JavaScript performs both kinds of settings directly in the browser based on WebAssembly, and manages input/output files through a virtual file system (VFS), with no backend service required.

This article covers two core features:

• Set Cell Background Color
• Set Worksheet Background Image

For installation and project configuration, refer to Integrating Spire.XLS for JavaScript in a React Project. The examples below assume Spire.XLS is installed and the WebAssembly module is initialized.

Set Cell Background Color

Setting a background color for cells highlights headers, important data, or specific regions. Spire.XLS for JavaScript sets a background color for a cell or a cell range through the CellRange.Style.Color property, with rich built-in colors supported. The main steps are as follows:

1. Create a Workbook object and use the LoadFromFile() method to load the Excel document.
2. Use the Workbook.Worksheets.get() method to get a specific worksheet.
3. Use the CellRange.Style.Color property to set a background color for a specific cell range.
4. Use the Workbook.SaveToFile() method to save the document to a specified path.

Here is a complete code example showing how to set background colors for cell ranges in React:

function App() {
  const setBackgroundColor = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font and Excel file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SetBackgroundColor.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // Load the workbook
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // Get the first worksheet
    const sheet = workbook.Worksheets.get(0);

    // Set the header row to a yellow background
    sheet.Range.get("A1:E1").Style.Color = xlsModule.Color.get_Yellow();

    // Set the first two data rows to a light sky blue background
    sheet.Range.get("A2:E2").Style.Color = xlsModule.Color.get_LightSkyBlue();
    sheet.Range.get("A3:E3").Style.Color = xlsModule.Color.get_LightSkyBlue();

    // Save the document
    const outputFileName = 'SetBackgroundColor_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the converted file from the VFS and trigger a download
    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;

After setting the background colors, the header row is displayed with a yellow background and the first two data rows with a light sky blue background, making it easy to distinguish cells in different regions.

Set Worksheet Background Image

In addition to setting background colors for cells, you can also set a background image for the whole worksheet to make the report more recognizable. Spire.XLS for JavaScript sets an image as the worksheet background through the Worksheet.PageSetup.BackgroundImage property. The main steps are as follows:

1. Create a Workbook object and use the LoadFromFile() method to load the Excel document.
2. Use the Workbook.Worksheets.get() method to get a specific worksheet.
3. Use a Stream object to read the image file to be used as the background.
4. Use the Worksheet.PageSetup.BackgroundImage property to set the image as the worksheet background.
5. Use the Workbook.SaveToFile() method to save the document to a specified path.

Here is a complete code example showing how to set a background image for a worksheet in React:

function App() {
  const setBackgroundImage = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font, image, and Excel file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/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/`);

    // Load the workbook
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // Get the first worksheet
    const sheet = workbook.Worksheets.get(0);

    // Open the image as a stream
    const bm = new xlsModule.Stream(backgroundImageName);

    // Set the image as the worksheet background
    sheet.PageSetup.BackgroundImage = bm;

    // Save the document
    const outputFileName = 'SetBackgroundImage_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the converted file from the VFS and trigger a download
    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;

After setting the background image, the image fills the back of the worksheet as its background, while the cell contents and data remain clearly displayed on top of the image.

FAQ

The background color is lost after saving and reopening

Cause: The Style.Color property sets the background (fill) color of a cell, not the font color. If the color is overridden by other styles, or the fill pattern is not set correctly, the color may not display properly.

Solution: Set the color directly for the cell range, for example sheet.Range.get("A1:E1").Style.Color = xlsModule.Color.get_Yellow();. If you want to use a patterned fill, combine Style.Interior.FillPattern and Style.Interior.Gradient.

The background image does not appear above the data

Cause: A worksheet background image is always displayed behind the cell contents and only serves as background decoration. It neither covers the data nor is covered by it.

Solution: This is the normal display layering. If you need the image to appear on top of the data, use the Worksheet.Pictures.Add() method to insert a floating image in the worksheet instead of setting a worksheet background.

Obtain a Free License

Spire.XLS for JavaScript offers a 30-day full-featured free trial license with no functional limitations. Apply here to evaluate before purchasing.