In office automation workflows, you often need to batch-extract product images from Excel reports, replace outdated logos, or export a specific image individually. Spire.XLS for JavaScript handles all of these image operations directly in the browser via WebAssembly, using a virtual file system (VFS) to manage input and output files — no backend server is required.

This article covers three core features:

• Extract All Images from a Worksheet
• Extract a Specific Image
• Replace an Existing Image in a Worksheet

For installation and project setup, 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.

Extract All Images from a Worksheet

Batch-extracting all images from a worksheet is useful for backing up embedded images in reports, migrating product materials, and similar scenarios. The process consists of three steps: iterate over the Worksheet.Pictures collection, call the Picture.Save method on each image to save it to the VFS, then read each file and trigger a browser download.

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

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

    // Load the Excel file into VFS
    const inputFileName = 'ReadImages.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // Load the workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });
    const sheet = workbook.Worksheets.get(0);

    // Iterate through all pictures in the worksheet and export each one
    for (let i = 0; i < sheet.Pictures.Count; i++) {
      const pic = sheet.Pictures.get(i);
      const outputFileName = `Image-${i + 1}.png`;
      pic.Picture.Save(outputFileName);

      // Read the exported image file from VFS and trigger download
      const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const blob = new Blob([fileArray], { type: "image/png" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      a.click();
      URL.revokeObjectURL(url);
    }

    // Release resources
    workbook.Dispose();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Extract All Images from Worksheet</h1>
      <button onClick={extractAllImages}>
        Extract All Images
      </button>
    </div>
  );
}

export default App;

Image files extracted and downloaded from the worksheet in batch

Extract a Specific Image

There are two common ways to extract a specific image from a worksheet: retrieve it directly by index, or iterate through pictures by name to find a match. The index approach suits scenarios where the picture position is known (for example, the first picture), while the name approach is better when you know the picture identifier in advance. The process consists of two steps: first locate the target image by index or name, then export it as a local file.

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

    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the Excel file into VFS
    const inputFileName = 'ReadImages.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // Load the workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });
    const sheet = workbook.Worksheets.get(0);

    // Method 1: Extract by index (e.g., extract the second picture)
    const pic = sheet.Pictures.get(1);
    const outputFileName = 'ExtractByIndex.png';

    // // Method 2: Iterate through pictures by name to find a match
    // let pic = null;
    // const targetName = 'SpireXLS';
    // for (let i = 0; i < sheet.Pictures.Count; i++) {
    //   if (sheet.Pictures.get(i).Name === targetName) {
    //     pic = sheet.Pictures.get(i);
    //     break;
    //   }
    // }
    // const outputFileName = 'ExtractByName.png';

    // Save the picture to VFS and trigger download
    pic.Picture.Save(outputFileName);
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: "image/png" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);

    workbook.Dispose();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Extract a Specific Image</h1>
      <button onClick={extractImage}>
        Extract Image
      </button>
    </div>
  );
}

export default App;

Specific image extracted and downloaded by index or name

Replace an Existing Image in a Worksheet

Replacing an existing image in a worksheet is a common requirement when updating report logos, changing product display images, and in similar scenarios. The approach is to first retrieve the position and size information of the target image, then delete it via XlsShape.Convert, and finally insert a new image at the same position, setting the new image's size and offsets to match the original.

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

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

    // Load the Excel file and the new image into VFS
    const inputFileName = 'ReadImages.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
    const newImageFile = 'Logo.png';
    await window.spire.FetchFileToVFS(newImageFile, '', `${process.env.PUBLIC_URL}data/`);

    // Load the workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });
    const sheet = workbook.Worksheets.get(0);

    // Get the first picture and its position and size information
    const oldPic = sheet.Pictures.get(0);
    const topRow = oldPic.TopRow;
    const leftColumn = oldPic.LeftColumn;
    const leftColumnOffset = oldPic.LeftColumnOffset;
    const topRowOffset = oldPic.TopRowOffset;
    const width = oldPic.Width;
    const height = oldPic.Height;

    // Delete the original picture
    xlsModule.XlsShape.Convert(oldPic).Remove();

    // Insert the new picture at the same position
    let picture = sheet.Pictures.Add({ topRow: topRow, leftColumn: leftColumn, fileName: newImageFile });

    // Set the new picture's size and offsets to match the original
    picture.Width = width;
    picture.Height = height;
    picture.LeftColumnOffset = leftColumnOffset;
    picture.TopRowOffset = topRowOffset;

    const outputFileName = 'ReplaceImage-out.xlsx';
    // Save the modified workbook
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });
    // Release resources
    workbook.Dispose();

    // Read the generated file from VFS and trigger 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>Replace Image in Worksheet</h1>
      <button onClick={replaceImage}>
        Replace Image
      </button>
    </div>
  );
}

export default App;

The Excel worksheet after the image is replaced

FAQ

Extracted images cannot be opened or the format is incorrect

Cause: The correct file extension was not specified when saving the image, or the MIME type does not match the image format.

Solution: Make sure the file extension used in the Picture.Save method matches the actual image format. If the image is in PNG format, the file extension should be .png; if it is in JPEG format, use .jpg. The Blob type used for the download should be set accordingly:

// PNG format
const blob = new Blob([fileArray], { type: "image/png" });

// JPEG format
const blob = new Blob([fileArray], { type: "image/jpeg" });

The position or size of the image changes after replacement

Cause: The position and size properties of the original image were not recorded before deletion, so the new image cannot be precisely aligned to the original position or retain its original size.

Solution: Save the position properties such as TopRow, LeftColumn, LeftColumnOffset, TopRowOffset and the size properties Width, Height before deleting the image. After inserting the new image, set these properties on the new picture so it matches the original:

// Insert the new picture (specify the row and column position)
let picture = sheet.Pictures.Add({ topRow: topRow, leftColumn: leftColumn, fileName: newImageFile });

// Set size and offsets to match the original
picture.Width = width;
picture.Height = height;
picture.LeftColumnOffset = leftColumnOffset;
picture.TopRowOffset = topRowOffset;

Get 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.

Images in Excel can add a visual element to your data, making it more engaging and easier to understand. From adding company logos to embedding charts or diagrams, images can convey complex information more effectively than text alone. There are also times that you need to remove the images that are no longer relevant or cluttering your worksheet. This article will demonstrate how to insert or delete images in an Excel worksheet in React using Spire.XLS for JavaScript.

• Insert Images in Excel in JavaScript
• Delete Images in Excel in JavaScript

Install Spire.XLS for JavaScript

To get started with inserting or deleting picture in Excel in a React application, you can either download Spire.XLS for JavaScript from our website or install it via npm with the following command:

npm i spire.office

The downloaded product package has been integrated Spire.Doc for JavaScript，Spire.XLS for JavaScript，Spire.PDF for JavaScript，Spire.Presentation for JavaScript. To use the functionality of Spire.XLS for JavaScript, you need to copy the corresponding files (spire.xls.js, Spire.Xls.Wasm.zip, spire.common.js, Spire.Common.Wasm.zip, and _framework) to the project's "public" folder. At the same time, in order to ensure text rendering, the related font files can be added with custom paths. In the following example, the font addition path is: public\static\font.

For more details, refer to the documentation: How to Integrate Spire.XLS for JavaScript in a React Project

Insert Images in Excel in JavaScript

Spire.XLS for JavaScript provides the Worksheet.Pictures.Add() method to add a picture to a specified cell in an Excel worksheet. The following are the main steps.

• Create a Workbook object using the new wasmModule.Workbook() method.
• Get a specific worksheet using the Workbook.Worksheets.get() method.
• Insert a picture into a specific cell using the Worksheet.Pictures.Add() method and return an object of ExcelPicture.
• Set the width and height of the picture, as well as the distance between the picture and the cell border through the properties under the ExcelPicture object.
• Save the result file using the Workbook.SaveToFile() method.

import React, { useState, useEffect } from 'react';
function App() {
  const [wasmModule, setWasmModule] = useState(null);
  // Load Spire.XLS
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function'
          ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
          : rawModule;
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('Failed to load spire.xls.js WASM module:', error);
      }
    })();
  }, []);

  // Function to insert an image in Excel 
  const InsertExcelImage = async () => {
    const wasmModule = window.wasmModule.spirexls;

    if (wasmModule) {
      // Load font into Virtual File System (VFS)
      await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);


      // Load the image files into the virtual file system (VFS)
      let inputFileName = 'logo.png';
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);


      // Create a new workbook
      let workbook = new wasmModule.Workbook();

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

      // Add a picture to the specific cell
      let picture = sheet.Pictures.Add({ topRow: 2, leftColumn: 3, fileName: inputFileName });

      // Set the picture width and height
      picture.Width = 150
      picture.Height = 150

      // Adjust the column width and row height to accommodate the picture
      sheet.SetRowHeight(2, 135);
      sheet.SetColumnWidth(3, 25);

      // Set the distance between cell border and picture
      picture.LeftColumnOffset = 90
      picture.TopRowOffset = 20

      // Save the modified workbook to the specified file
      const outputFileName = 'InsertExcelImage.xlsx';
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2016 });

      // Read the saved file and convert to Blob object
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

      // Create a URL for the Blob and initiate download
      const url = URL.createObjectURL(modifiedFile);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

      // Clean up resources used by the workbook
      workbook.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Insert an Image to a Specified Cell in Excel Using JavaScript in React</h1>
      <button onClick={InsertExcelImage} disabled={!wasmModule}>
        Process
      </button>
    </div>
  );
}

export default App;

Run the code to launch the React app at localhost:3000. Once it's running, click the "Process" button to insert image in Excel:

Below is the result file:

Delete Images in Excel in JavaScript

To delete all pictures in an Excel worksheet, you need to iterate through each picture and then remove them through the Worksheet.Pictures.get().Remove() method. The following are the main steps.

• Create a Workbook object using the new wasmModule.Workbook() method.
• Load an Excel file using the Workbook.LoadFromFile() method.
• Get a specific worksheet using the Workbook.Worksheets.get() method.
• Iterate through all pictures in the worksheet and then remove them using the Worksheet.Pictures.get().Remove() method.
• Save the result file using the Workbook.SaveToFile() method.

import React, { useState, useEffect } from 'react';
function App() {
  const [wasmModule, setWasmModule] = useState(null);
  // Load Spire.XLS
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function'
          ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
          : rawModule;
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('Failed to load spire.xls.js WASM module:', error);
      }
    })();
  }, []);

  // Function to delete images from Excel
  const DeleteExcelImage = async () => {
    const wasmModule = window.wasmModule.spirexls;

    if (wasmModule) {
      // Load font into Virtual File System (VFS)
      await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);


      // Load the excel files into the virtual file system (VFS)
      let inputFileName = 'InsertExcelImage.xlsx';
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);


      // Create a new workbook
      let workbook = new wasmModule.Workbook();

      // Load the Excel document
      workbook.LoadFromFile({ fileName: inputFileName });

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

      // Delete all images from the worksheet
      for (let i = sheet.Pictures.Count - 1; i >= 0; i--) {
        sheet.Pictures.get(i).Remove();
      }

      // Save the result file
      const outputFileName = 'DeleteImages.xlsx';
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2016 });

      // Read the saved file and convert to Blob object
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

      // Create a URL for the Blob and initiate download
      const url = URL.createObjectURL(modifiedFile);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

      // Clean up resources used by the workbook
      workbook.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Delete Images from Excel Using JavaScript in React</h1>
      <button onClick={DeleteExcelImage} disabled={!wasmModule}>
        Process
      </button>
    </div>
  );
}

export default App;

Get a Free License

To fully experience the capabilities of Spire.XLS for JavaScript without any evaluation limitations, you can request a free 30-day trial license.