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.

OFD (Open Fixed-layout Document) is a national standard fixed-layout document format widely used in e-invoices, e-certificates, administrative approvals, and other government and financial scenarios. OFD describes document structure based on XML, offering advantages such as independent control and information security. Meanwhile, PDF remains indispensable as an internationally recognized document format for cross-platform distribution. Real-world business often requires flexible switching between the two formats: receiving OFD-format e-invoices and converting them to PDF for printing and distribution, or converting existing PDF contracts to OFD to meet government platform upload requirements.

Spire.PDF for JavaScript performs bidirectional conversion between PDF and OFD entirely in the browser via WebAssembly, managing input and output files through a virtual file system (VFS) with no backend server required.

This article covers two core features:

• Convert PDF to OFD
• Convert OFD to PDF

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

Convert PDF to OFD

The core of PDF-to-OFD conversion is to re-encode the page content, fonts, and graphics elements from a PDF document into an XML description structure compliant with the OFD standard. Spire.PDF for JavaScript accomplishes this in one step through the PdfDocument object's SaveToFile method with the FileFormat.OFD enum value, eliminating the need to handle underlying format differences manually.

function App() {
  const convertToOFD = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

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

    // Load fonts and PDF file into VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'TemplateIntroduction-en.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Define the output file name for OFD format
    const outputFileName = 'OutputOFD.ofd';

    // Save as OFD format
    doc.SaveToFile({ fileName: outputFileName, fileFormat: pdfModule.FileFormat.OFD });
    doc.Close();

    // Read the converted file from VFS and trigger download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/ofd' });
    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>Convert PDF To OFD</h1>
      <button onClick={convertToOFD}>
        Generate
      </button>
    </div>
  );
}

export default App;

OFD output generated after conversion via SaveToFile with FileFormat.OFD

Convert OFD to PDF

OFD-to-PDF conversion is a common requirement in government electronic document distribution scenarios. Spire.PDF for JavaScript provides the OfdConverter component, which is specifically designed to parse OFD fixed-layout documents and export them as standard PDF files while preserving the original document's layout and visual appearance.

function App() {
  const convertOFDToPDF = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

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

    // Load fonts and OFD file into VFS
    await window.spire.FetchFileToVFS('Arial.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'Invoice_EN.ofd';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create OfdConverter object and pass the OFD file path
    let converter = new pdfModule.OfdConverter(inputFileName);
    
    // Define the output file name for PDF format
    const outputFileName = 'OutputPDF.pdf';

    // Convert to PDF format
    converter.ToPdf(outputFileName);
    converter.Dispose();

    // Read the converted file from VFS and trigger download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    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>Convert OFD To PDF</h1>
      <button onClick={convertOFDToPDF}>
        Generate
      </button>
    </div>
  );
}

export default App;

Standard PDF output generated after conversion via OfdConverter

FAQ

Can encrypted PDFs be converted to OFD?

Password-protected encrypted PDFs cannot be saved as OFD directly via SaveToFile — the document must be decrypted first.

Solution: Provide the password when loading the PDF via the second parameter of LoadFromFile, then save as OFD:

// Load a password-protected PDF document
let doc = new pdfModule.PdfDocument();
doc.LoadFromFile(inputFileName, "password");

// Save as OFD format
doc.SaveToFile({ fileName: outputFileName, fileFormat: pdfModule.FileFormat.OFD });
doc.Close();

Garbled text in the converted OFD document

OFD relies on font embedding to ensure consistent cross-platform rendering. If the input PDF uses non-embedded fonts and the corresponding font files are not loaded in the VFS, text may appear garbled after conversion.

Solution: Make sure the required TrueType font files (e.g., ARIALUNI.TTF) are loaded into the /Library/Fonts/ directory in VFS before calling the conversion. ARIALUNI.TTF covers common CJK characters and is the recommended font for ensuring conversion quality.

Get a Free License

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

Data labels are an essential element of Excel charts for displaying detailed information about data points, such as values, series names, and category names. Spire.XLS for JavaScript runs entirely in the browser via WebAssembly, using a virtual file system (VFS) to manage input and output files — no backend server required. It provides a complete API for controlling data label display content, font formatting, number format, position, background, borders, and other appearance properties.

This article covers two core features:

• Set Data Label Content and Font
• Adjust Data Label Position and Appearance

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.

Set Data Label Content and Font

Data labels can display various types of information, including values, series names, category names, and legend keys. With Spire.XLS for JavaScript, you can flexibly control the display content of data labels and customize their font styles to make the chart information clearer and more readable. The steps are as follows:

1. Create a Workbook object and get the default worksheet.
2. Populate the worksheet with category labels and numeric data for the chart.
3. Add a chart using sheet.Charts.Add() and set the chart type.
4. Configure the chart's data range, position, and title.
5. Enable data label display content (values, series names, category names) via the DataLabels property.
6. Set data label font properties (font name, size, color, bold, etc.).
7. Save the workbook to an Excel file using SaveToFile().

Below is a complete code example demonstrating how to set chart data label content and font in React:

function App() {
  const setDataLabelContentAndFont = 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;
    }

    // Create a new workbook and get the default worksheet
    const workbook = new xlsModule.Workbook();
    let sheet = workbook.Worksheets.get(0);
    sheet.Name = "DataLabelDemo";

    // Populate chart data
    sheet.Range.get("A1").Value = "Month";
    sheet.Range.get("A2").Value = "Jan";
    sheet.Range.get("A3").Value = "Feb";
    sheet.Range.get("A4").Value = "Mar";
    sheet.Range.get("A5").Value = "Apr";
    sheet.Range.get("A6").Value = "May";
    sheet.Range.get("A7").Value = "Jun";

    sheet.Range.get("B1").Value = "Sales";
    sheet.Range.get("B2").NumberValue = 25;
    sheet.Range.get("B3").NumberValue = 18;
    sheet.Range.get("B4").NumberValue = 8;
    sheet.Range.get("B5").NumberValue = 13;
    sheet.Range.get("B6").NumberValue = 22;
    sheet.Range.get("B7").NumberValue = 28;

    // Add a line chart and set its data range
    let chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.LineMarkers });
    chart.DataRange = sheet.Range.get("B1:B7");
    chart.SeriesDataFromRange = false;

    // Set the chart position
    chart.TopRow = 5;
    chart.BottomRow = 26;
    chart.LeftColumn = 2;
    chart.RightColumn = 11;

    // Configure chart title
    chart.ChartTitle = "Data Labels Demo";
    chart.ChartTitleArea.IsBold = true;
    chart.ChartTitleArea.Size = 12;

    // Bind category labels
    let cs1 = chart.Series.get(0);
    cs1.CategoryLabels = sheet.Range.get("A2:A7");

    // Set data label display content: show values, series names, and category names
    cs1.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
    cs1.DataPoints.DefaultDataPoint.DataLabels.HasSeriesName = true;
    cs1.DataPoints.DefaultDataPoint.DataLabels.HasCategoryName = true;

    // Set data label delimiter
    cs1.DataPoints.DefaultDataPoint.DataLabels.Delimiter = ". ";

    // Customize data label font styles
    cs1.DataPoints.DefaultDataPoint.DataLabels.Size = 9;
    cs1.DataPoints.DefaultDataPoint.DataLabels.Color = xlsModule.Color.get_Red();
    cs1.DataPoints.DefaultDataPoint.DataLabels.FontName = "Calibri";
    cs1.DataPoints.DefaultDataPoint.DataLabels.IsBold = true;

    // Save the workbook
    const outputFileName = 'DataLabelContentAndFont.xlsx';
    workbook.SaveToFile(outputFileName);
    workbook.Dispose();

    // Read the 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>Set Data Label Content and Font</h1>
      <button onClick={setDataLabelContentAndFont}>
        Generate
      </button>
    </div>
  );
}

export default App;

Data label content and font set with Spire.XLS for JavaScript

Adjust Data Label Position and Appearance

Beyond display content and font styles, the position and appearance of data labels are also important aspects of chart visual enhancement. Spire.XLS for JavaScript supports adjusting the display position of data labels through the DataLabelPositionType enumeration, and allows you to set fill colors, border styles, and shadow effects for data labels. The steps are as follows:

1. Create a Workbook object and load an existing Excel file containing a chart.
2. Get the worksheet via workbook.Worksheets.get().
3. Get the chart object using sheet.Charts.get().
4. Iterate through the chart's data series and set the data label position using DataLabels.Position.
5. Set a background fill color for the data labels via FrameFormat.Fill.
6. Set border color and style for the data labels via FrameFormat.Border.
7. Add shadow effects to data labels via FrameFormat.Shadow (type, color, transparency, size, blur, angle, and distance).
8. Save the workbook to an Excel file using SaveToFile().

Below is a complete code example demonstrating how to adjust chart data label position and appearance in React:

function App() {
  const setDataLabelPositionAndAppearance = 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 sample file into the virtual file system (VFS)
    let excelFileName = 'SampleChart.xlsx';
    await window.spire.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}data/`);

    // Create a workbook object and load the existing file
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: excelFileName });

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

    // Get the first chart
    let chart = sheet.Charts.get(0);

    // Iterate through all data series and adjust data label position and appearance
    for (let i = 0; i < chart.Series.Count; i++) {
      let cs = chart.Series.get(i);
      // Set data point marker style and size to make data points more prominent
      cs.DataFormat.MarkerSize = 6;
      cs.DataFormat.MarkerStyle = xlsModule.ChartMarkerType.Circle;
      cs.DataFormat.MarkerForegroundColor = xlsModule.Color.get_Blue();
      cs.DataFormat.MarkerBackgroundColor = xlsModule.Color.get_White();
      
      let dataLabels = cs.DataPoints.DefaultDataPoint.DataLabels;

      // Enable value labels
      dataLabels.HasValue = true;

      // Set data label position
      dataLabels.Position = xlsModule.DataLabelPositionType.Right;

      // Set data label font color and size
      dataLabels.Color = xlsModule.Color.get_Blue();
      dataLabels.Size = 10;

      // Set pink fill background
      dataLabels.FrameFormat.Fill.FillType = xlsModule.ShapeFillType.SolidColor;
      dataLabels.FrameFormat.ForeGroundColor = xlsModule.Color.get_Pink();

      // Set red border
      dataLabels.FrameFormat.Border.Pattern = xlsModule.ChartLinePatternType.Solid;
      dataLabels.FrameFormat.Border.Color = xlsModule.Color.get_Red();

      // Set yellow shadow effect
      dataLabels.FrameFormat.Shadow.ShadowOuterType = xlsModule.XLSXChartShadowOuterType.OffsetDiagonalBottomLeft;
      dataLabels.FrameFormat.Shadow.Color = xlsModule.Color.get_Yellow();
      dataLabels.FrameFormat.Shadow.Transparency = 0;
      dataLabels.FrameFormat.Shadow.Size = 10;
      dataLabels.FrameFormat.Shadow.Blur = 2;
      dataLabels.FrameFormat.Shadow.Angle = 45;
      dataLabels.FrameFormat.Shadow.Distance = 8;
    }

    // Save the workbook
    const outputFileName = 'DataLabelPositionAndAppearance.xlsx';
    workbook.SaveToFile(outputFileName);
    workbook.Dispose();

    // Read the 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>Set Data Label Position and Appearance</h1>
      <button onClick={setDataLabelPositionAndAppearance}>
        Generate
      </button>
    </div>
  );
}

export default App;

Data label position and appearance adjusted with Spire.XLS for JavaScript

FAQ

How to modify the label content of a specific data point instead of the entire series?

Cause: DefaultDataPoint.DataLabels applies to all data points in a series and cannot control individual data points separately.

Solution: Use DataPoints.get(index) to access a specific data point and set its label:

// Modify the label text of the third data point
chart.Series.get(0).DataPoints.get(2).DataLabels.Text = "Peak";
chart.Series.get(0).DataPoints.get(2).DataLabels.HasValue = false;

How to set number format for data labels (decimal places, currency symbols)

Cause: The number format of data labels matches the cell format by default, but sometimes needs to be controlled independently.

Solution: Use the DataLabels.NumberFormat property to customize the number format:

// Show two decimal places
dataLabels.NumberFormat = "0.00";
// Display as percentage
dataLabels.NumberFormat = "0.0%";
// Display with currency symbol
dataLabels.NumberFormat = "$#,##0";

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.

In daily office work, data often needs to be exchanged between Excel spreadsheets and plain text (TXT) files. Spire.XLS for JavaScript runs entirely in the browser via WebAssembly, using a virtual file system (VFS) to manage input and output files — no backend server is required. It provides flexible APIs for controlling conversion parameters such as delimiters and encoding formats.

With Spire.XLS for JavaScript, you can export Excel worksheet data as structured text files, or import delimited text files to create fully formatted Excel workbooks. This makes data migration between different applications more convenient and efficient.

This article covers two core features:

• Convert Excel Worksheet Data to TXT
• Convert TXT File to Excel Workbook

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.

Convert Excel Worksheet Data to TXT

Exporting Excel data as a plain text file makes it convenient for further processing or analysis in other applications. With Spire.XLS for JavaScript, you can save the contents of a specified worksheet as a TXT file, with flexible control over the field separator and character encoding. The steps are as follows:

• Create a Workbook object and load an existing Excel file.
• Retrieve a specific worksheet via workbook.Worksheets.get(index).
• Call the worksheet's SaveToFile() method, specifying the output filename, separator, and encoding.
• Dispose of the workbook resources, read the result file from VFS, and trigger the download.

Below is a complete code example demonstrating how to convert Excel to TXT in React:

function App() {
  const convertToText = 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 sample file into VFS
    await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);

    // Create a workbook object and load the Excel file
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });

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

    // Save the worksheet as a TXT file with space separator and UTF-8 encoding
    const outputFileName = 'ExcelToTxt.txt';
    sheet.SaveToFile({
      fileName: outputFileName,
      separator: " ",
      encoding: xlsModule.Encoding.get_UTF8()
    });
    workbook.Dispose();

    // Read the file from VFS and trigger download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'text/plain' });
    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>Convert Excel to TXT</h1>
      <button onClick={convertToText}>
        Generate
      </button>
    </div>
  );
}

export default App;

Excel converted to TXT with Spire.XLS for JavaScript

Convert TXT File to Excel Workbook

Importing a delimited text file into an Excel spreadsheet allows you to take full advantage of Excel's formatting, calculation, and charting capabilities. Spire.XLS for JavaScript supports TXT-to-Excel conversion by reading the text file content and writing data to the workbook cell by cell. Formatting such as bold headers can also be applied during the process. The steps are as follows:

• Load the font file and TXT sample file into the VFS.
• Read the TXT file content from VFS, split it by lines, and parse the cell data for each line.
• Create a Workbook object, iterate through the data array, and write data to worksheet cells row by row and column by column.
• Apply bold styling to the header row and call AllocatedRange.AutoFitColumns() to auto-fit column widths.
• Save the workbook as an Excel file and trigger the download.

Below is a complete code example demonstrating how to convert TXT to Excel in React:

function App() {
  const convertToExcel = 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 font file to ensure proper text rendering
    await window.spire.FetchFileToVFS('ARIAL.TTF', '', `${process.env.PUBLIC_URL}font/`);

    // Load the TXT file into VFS
    await window.spire.FetchFileToVFS('Sample.txt', '', `${process.env.PUBLIC_URL}data/`);

    // Read the text file content from VFS
    const txtData = window.dotnetRuntime.Module.FS.readFile('Sample.txt');
    const text = typeof txtData === 'string' ? txtData : new TextDecoder('utf-8').decode(txtData);

    // Split by lines, compatible with \r\n and \n
    const lines = text.trim().split(/\r?\n/);

    // Parse each line of data (try tab delimiter first, then fallback to other delimiters)
    const data = [];
    for (const line of lines) {
      const trimmed = line.trim();
      if (!trimmed) continue;
      let cells = trimmed.split('\t');
      if (cells.length === 1) {
        cells = trimmed.split(/\s+/);
      }
      data.push(cells);
    }

    // Create a Workbook object
    const workbook = new xlsModule.Workbook();

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

    // Iterate through rows and columns in the data array and write to cells
    for (let row = 0; row < data.length; row++) {
      for (let col = 0; col < data[row].length; col++) {
        const cell = sheet.get_Item(row + 1, col + 1);
        cell.Value = data[row][col];
        // Bold the header row
        if (row === 0) {
          cell.Style.Font.IsBold = true;
        }
      }
    }

    // Auto-fit column widths
    sheet.AllocatedRange.AutoFitColumns();

    // Save the workbook and release resources
    const outputFileName = 'TxtToExcel.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });
    workbook.Dispose();

    // Read the 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>Convert TXT to Excel</h1>
      <button onClick={convertToExcel}>
        Generate
      </button>
    </div>
  );
}

export default App;

TXT converted to Excel with Spire.XLS for JavaScript

FAQ

How to handle encoding issues during conversion?

Cause: The TXT file in this example uses UTF-8 encoding. If the TXT file uses a different encoding format (such as GBK, GB2312, etc.), decoding it directly with TextDecoder('utf-8') will result in garbled text.

Solution: Specify the corresponding encoding type in the TextDecoder constructor parameter based on the actual encoding of the TXT file:

// UTF-8 encoding
const text = new TextDecoder('utf-8').decode(txtData);

// GBK encoding
const text = new TextDecoder('gbk').decode(txtData);

// GB2312 encoding
const text = new TextDecoder('gb2312').decode(txtData);

// UTF-16 encoding
const text = new TextDecoder('utf-16').decode(txtData);

How to handle TXT files with different delimiters?

Cause: TXT files may use different delimiters such as tabs (\t), spaces, commas (,), semicolons (;), etc. Choosing the wrong delimiter can lead to data parsing errors.

Solution: In JavaScript, you can specify different delimiters by modifying the parameter of the split() method:

// Tab delimiter
let cells = trimmed.split('\t');

// Comma delimiter
let cells = trimmed.split(',');

// Semicolon delimiter
let cells = trimmed.split(';');

// Regular expression: split by one or more whitespace characters (spaces, tabs, etc.)
let cells = trimmed.split(/\s+/);

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.