Read or Delete Excel Document Properties with JavaScript in React

Excel document properties — such as title, author, category, and other metadata — are essential for file management and information retrieval. Spire.XLS for JavaScript runs entirely in the browser via WebAssembly, using a virtual file system (VFS) to manage input and output files. It provides a complete API for accessing and managing both DocumentProperties (standard/built-in properties) and CustomDocumentProperties (user-defined name-value pairs).

Spire.XLS categorizes document properties into two types: standard and custom. Standard document properties are predefined built-in metadata like title, subject, author, category, keywords, and comments. Custom document properties are user-defined name-value pairs that can contain text, numbers, dates, or boolean values.

This article covers two core features:

• Read Standard and Custom Document Properties
• Delete Standard and Custom Document Properties

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.

Read Standard and Custom Document Properties

Reading document properties is the first step in understanding an Excel file's metadata. Through the DocumentProperties and CustomDocumentProperties collections, you can easily access all property information stored in the file. The steps are as follows:

• Create a Workbook object and load an existing Excel file.
• Retrieve the standard document properties collection via workbook.DocumentProperties.
• Iterate through the DocumentProperties collection to read each property's name and value.
• Retrieve the custom document properties collection via workbook.CustomDocumentProperties.
• Iterate through the CustomDocumentProperties collection to read each custom property's name and value.
• Output the retrieved property information to a text file.

Below is a complete code example demonstrating how to read Excel document properties in React:

function App() {
  const readDocumentProperties = 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/`);

    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });

    // Get standard document properties
    let properties1 = workbook.DocumentProperties;
    let sb = [];
    sb.push("Excel Properties:");
    for (let i = 0; i < properties1.Count; i++) {
      let name = properties1.get(i).Name;
      let obj = properties1.get(i).Value;
      let t = properties1.get(i).PropertyType;
      let value = null;
      if (t === xlsModule.PropertyType.Double) {
        value = xlsModule.Double.Convert(obj).Value;
      } else if (t === xlsModule.PropertyType.DateTime) {
        // Convert OADate to JavaScript Date and format as date string
        let oaDate = xlsModule.DateTime.Convert(obj).Value;
        let jsDate = new Date((oaDate - 25569) * 86400 * 1000);
        value = jsDate.toLocaleDateString();
      } else if (t === xlsModule.PropertyType.Bool) {
        value = xlsModule.Boolean.Convert(obj).Value;
      } else if (
        t === xlsModule.PropertyType.Int ||
        t === xlsModule.PropertyType.Int32
      ) {
        value = xlsModule.Int32.Convert(obj).Value;
      } else {
        value = xlsModule.String.Convert(obj).Value;
      }
      sb.push(name + ": " + String(value));
    }
    sb.push("");

    // Get custom document properties
    let properties2 = workbook.CustomDocumentProperties;
    sb.push("Custom Properties:");
    for (let i = 0; i < properties2.Count; i++) {
      let name = properties2.get(i).Name;
      let t = properties2.get(i).PropertyType;
      let obj = properties2.get(i).Value;
      let value = null;
      if (t === xlsModule.PropertyType.Double) {
        value = xlsModule.Double.Convert(obj).Value;
      } else if (t === xlsModule.PropertyType.DateTime) {
        // Convert OADate to JavaScript Date and format as date string
        let oaDate = xlsModule.DateTime.Convert(obj).Value;
        let jsDate = new Date((oaDate - 25569) * 86400 * 1000);
        value = jsDate.toLocaleDateString();
      } else if (t === xlsModule.PropertyType.Bool) {
        value = xlsModule.Boolean.Convert(obj).Value;
      } else if (
        t === xlsModule.PropertyType.Int ||
        t === xlsModule.PropertyType.Int32
      ) {
        value = xlsModule.Int32.Convert(obj).Value;
      } else {
        value = xlsModule.String.Convert(obj).Value;
      }
      sb.push(name + ": " + String(value));
    }

    // Save the property information to a text file
    const outputFileName = 'DocumentProperties.txt';
    window.dotnetRuntime.Module.FS.writeFile(outputFileName, sb.join("\n"));
    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>Read Excel Document Properties</h1>
      <button onClick={readDocumentProperties}>
        Generate
      </button>
    </div>
  );
}

export default App;

Document properties read with Spire.XLS for JavaScript

Delete Standard and Custom Document Properties

In some scenarios, you may need to clear sensitive or outdated metadata from Excel files. Spire.XLS for JavaScript allows you to delete both standard and custom document properties through straightforward API calls. The steps are as follows:

• Create a Workbook object and load an existing Excel file.
• Retrieve the standard document properties collection via workbook.DocumentProperties.
• Clear standard properties by setting their values to empty strings.
• Retrieve the custom document properties collection via workbook.CustomDocumentProperties.
• Iterate through the collection and use the Remove() method to delete each custom property.
• Save the modified workbook to a new Excel file.

Below is a complete code example demonstrating how to delete Excel document properties in React:

function App() {
  const deleteDocumentProperties = 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/`);

    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });

    // Get the standard document properties collection and clear their values
    let standardProperties = workbook.DocumentProperties;
    standardProperties.Title = "";
    standardProperties.Subject = "";
    standardProperties.Manager = "";
    standardProperties.Category = "";
    standardProperties.Keywords = "";
    standardProperties.Comments = "";
    standardProperties.Author = "";
    standardProperties.Company = "";

    // Get the custom document properties collection, iterate and remove all properties
    let customProperties = workbook.CustomDocumentProperties;
    for (let i = customProperties.Count - 1; i >= 0; i--) {
      customProperties.Remove(customProperties.get(i).Name);
    }

    // Save the workbook
    const outputFileName = 'DeleteProperties.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>Delete Excel Document Properties</h1>
      <button onClick={deleteDocumentProperties}>
        Generate
      </button>
    </div>
  );
}

export default App;

Document properties deleted with Spire.XLS for JavaScript

FAQ

Why can't standard document properties be removed using Remove() like custom properties?

Cause: Standard document properties are part of the Excel file structure, each with a fixed definition position that cannot be removed from the collection.

Solution: Clear standard properties by setting their values to empty strings instead of removing the properties themselves:

standardProperties.Title = "";
standardProperties.Author = "";

Custom properties can be directly deleted using the Remove() method.

How to handle reading non-text property types such as dates, booleans, and numbers?

Cause: Using String.Convert() directly on date or boolean properties may produce results in an unexpected format.

Solution: Check the PropertyType to determine the type and use the appropriate conversion method:

if (t === xlsModule.PropertyType.DateTime) {
  let oaDate = xlsModule.DateTime.Convert(obj).Value;
  let jsDate = new Date((oaDate - 25569) * 86400 * 1000);
  value = jsDate.toLocaleDateString();
} else if (t === xlsModule.PropertyType.Bool) {
  value = xlsModule.Boolean.Convert(obj).Value;
}

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.