In today's data-driven landscape, efficiently handling Excel files is crucial for web applications. React, a widely-used JavaScript library for user interfaces, can significantly enhance its capabilities by integrating Spire.XLS for JavaScript. This integration allows developers to perform complex operations like reading, writing, and formatting Excel files directly within their React projects.

This article will walk you through the integration of Spire.XLS for JavaScript into your React projects, covering everything from the initial setup to a straightforward usage example.

• Benefits of Using Spire.XLS for JavaScript in React Projects
• Set Up Your Environment
• Integrate Spire.XLS for JavaScript in Your Project
• Create and Save Excel Files Using JavaScript

Benefits of Using Spire.XLS for JavaScript in React Projects

React, a popular JavaScript library for building user interfaces, has revolutionized web development by enabling developers to create interactive and dynamic user experiences. On the other hand, Spire.XLS for JavaScript is a powerful library that allows developers to manipulate Excel files directly in the browser.

By integrating Spire.XLS for JavaScript into your React project, you can add advanced Excel capabilities to your application. Here are some of the key advantages:

• Enhanced Functionality: Spire.XLS for JavaScript enables creating, modifying, and formatting Excel files directly in the browser, enhancing your React app's capabilities and user experience.
• Improved Data Management: Easily import, export, and manipulate Excel files with Spire.XLS, streamlining data management and reducing errors.
• Cross-Browser Compatibility: Designed to work seamlessly across major web browsers, Spire.XLS ensures consistent handling of Excel files in your React application.
• Seamless Integration: Compatible with various JavaScript frameworks, including React, Spire.XLS integrates easily into existing projects without disrupting your workflow.

Set Up Your Environment

Step 1. Install Node.js and npm

Download and install Node.js from the official website. Make sure to choose the version that matches your operating system.

After the installation is complete, you can verify that Node.js and npm are working correctly by running the following commands in your terminal:

node -v
npm -v

Step 2. Create a New React Project

Create a new React project named my-app using Create React App from terminal:

npx create-react-app my-app

Once the project is created, you can navigate to the project directory and start the development server using the following commands:

cd my-app
npm start

If your React project is compiled successfully, the app will be served at http://localhost:3000, allowing you to view and test your application in a browser.

To visually browse and manage the files in your project, you can open the project using VS Code.

Integrate Spire.XLS for JavaScript in Your Project

Download Spire.XLS for JavaScript from our website and unzip it to a location on your disk. Inside the lib folder, you will find the Spire.Xls.Base.js and Spire.Xls.Base.wasm files.

You can also install Spire.XLS for JavaScript using npm. In the terminal within VS Code, run the following command:

npm i spire.xls

This command will download and install the Spire.XLS package, including all its dependencies. Once the installation is complete, the Spire.Xls.Base.js and Spire.Xls.Base.wasm files will be saved in the node_modules/spire.xls path of your project.

Copy these two files into the "public" folder in your React project.

Add font files you plan to use to the "public" folder in your project.

Create and Save Excel Files Using JavaScript

Modify the code in the "App.js" file to generate an Excel file using the WebAssembly (WASM) module. Specifically, utilize the Spire.XLS for JavaScript library for Excel file manipulation.

Here is the entire code:

import React, { useState, useEffect } from 'react';

function App() {

  // State to hold the loaded WASM module
  const [wasmModule, setWasmModule] = useState(null);

  // useEffect hook to load the WASM module when the component mounts
  useEffect(() => {
    const loadWasm = async () => {
      try {

        // Access the Module and spirexls from the global window object
        const { Module, spirexls } = window;

        // Set the wasmModule state when the runtime is initialized
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirexls);
        };
      } catch (err) {

        // Log any errors that occur during loading
        console.error('Failed to load WASM module:', err);
      }
    };

    // Create a script element to load the WASM JavaScript file
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
    script.onload = loadWasm;

    // Append the script to the document body
    document.body.appendChild(script);

    // Cleanup function to remove the script when the component unmounts
    return () => {
      document.body.removeChild(script);
    };
  }, []); 

  // Function to create Excel file
  const createExcel = async () => {
    if (wasmModule) {

      // Load the ARIALUNI.TTF font file into the virtual file system (VFS)
      await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);

      // Create a new workbook
      const workbook = wasmModule.Workbook.Create();
      
      // Clear default worksheets
      workbook.Worksheets.Clear();
      
      // Add a new worksheet named "MySheet"
      const sheet = workbook.Worksheets.Add("MySheet");
      
      // Set text for the cell "A1"
      sheet.Range.get("A1").Text = "Hello World";
      
      // Aufit the column width 
      sheet.Range.get("A1").AutoFitColumns();
      
      // Define the output file name
      const outputFileName = 'HelloWorld.xlsx';
      
      // Save the workbook to the specified path
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });
      
      // Read the saved file and convert it to a Blob object
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      
      // Create a URL for the Blob and initiate the 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>Create an Excel File Using JavaScript in React</h1>
      <button onClick={createExcel} disabled={!wasmModule}>
        Generate
      </button>
    </div>
  );
}

export default App;

Save the changes by clicking "File" - "Save".

Start the development server by entering the following command in the terminal within VS Code:

npm start

Once the React app is successfully compiled, it will open in your default web browser, typically at http://localhost:3000.

Click "Generate," and a "Save As" window will prompt you to save the output file in the designated folder.

Apply for a Temporary License

If you'd like to remove the evaluation message from the generated documents, or to get rid of the function limitations, please request a 30-day trial license for yourself.

Excel manipulation is a crucial aspect of many modern web applications, from data analysis to report generation. Node.js, with its non-blocking I/O model and rich ecosystem, is an excellent choice for backend development. When combined with Spire.XLS for JavaScript, you can unlock a world of possibilities for handling Excel files efficiently.

This guide will walk you through the process of integrating Spire.XLS for JavaScript into your Node.js projects, covering everything from initial setup to generating a simple Excel document.

• Benefits of Using Spire.XLS for JavaScript in Node.js Projects
• Set Up Your Environment
• Integrate Spire.XLS for JavaScript in Your Project
• Create and Save Excel Files Using JavaScript

Benefits of Using Spire.XLS for JavaScript in Node.js Projects

Node.js is a great option for developing scalable network applications. When paired with Spire.XLS for JavaScript, you get a robust solution for handling Excel files. Here are some key features and benefits of using Spire.XLS for JavaScript in Node.js projects:

• Comprehensive Excel Support: Spire.XLS for JavaScript supports a wide range of Excel features, including formulas, charts, pivot tables, and more.
• High Performance: The library is optimized for speed, ensuring that your application remains responsive even when handling large datasets.
• Cross-Platform Compatibility: With Node.js, you can run your application on any platform that supports JavaScript, including Windows, macOS, and Linux.
• Secure and Reliable: The library is designed to be secure, with features like data validation and encryption to protect your data.

By leveraging the strengths of both Node.js and Spire.XLS for JavaScript, you can build powerful applications that handle Excel files with ease.

Set Up Your Environment

Step 1

Download and install Node.js from the official website. Make sure to choose the version that matches your operating system.

After the installation is complete, you can verify that Node.js and npm are installed correctly, along with the version numbers, by entering the following commands in CMD:

node -v 
npm -v 

Step 2

Create a Node.js project in your IntelliJ IDEA.

Install Jest in your project to write and run tests for your code, by running the following command in Terminal:

npm install --save-dev jest

Create a JavaScript file named "jest.config.js" in your project, and include the following configuration in it.

module.exports = {
    testTimeout: 20000,
    testEnvironment: 'node',
    transform: {},
    testMatch: ['<rootDir>/*.js'],
    moduleFileExtensions: [ 'json', 'node', 'tsx', 'ts', 'js', 'jsx','mjs'],
};

Add a "fonts" folder and a "lib" folder to your project.

Integrate Spire.XLS for JavaScript in Your Project

Download Spire.XLS for JavaScript and unzip it to a location on your disk. Inside the lib folder, you will find the Spire.Xls.Base.js and Spire.Xls.Base.wasm files.

Copy these two files into the "lib" folder in your Node.js project.

Place the font files you plan to use into the "fonts" folder in your project.

Create and Save Excel Files Using JavaScript

Add a JavaScript file in your project to generate a simple Excel document from JavaScript code.

Here is the entire JavaScript code:

// Import the library
const { Module, spirexls } = require("./lib/Spire.Xls.Base.js");

// Define a test case
test('testCase', async () => {
    await new Promise((resolve) => {
        Module.onRuntimeInitialized = () => {
            createExcel();
            resolve();
        };
    });
});

// Create a custom function
function createExcel (){

    // Load fonts
    spirexls.copyLocalPathToVFS("fonts/","/Library/Fonts/");

    // Specify output file name and path
    const outFileName = "HelloWorld.xlsx";
    const outputPath=  "result/" + outFileName;

    // Create a workbook
    let workbook = Module.spirexls.Workbook.Create();

    // Add a sheet
    let sheet =  workbook.Worksheets.Add("MySheet");

    // Write data to a specific cell
    sheet.Range.get("A1").Text = "Hello World";

    // Auto-fit column width
    sheet.Range.get("A1").AutoFitColumns();

    // Save the workbook to a file
    workbook.SaveToFile({fileName:outFileName, version:spirexls.ExcelVersion.Version2016});
    spirexls.copyFileFromFSToLocalStorage(outFileName, outputPath);

    // Dispose resources
    workbook.Dispose();
}

Once you run the code, you will find the generated Excel file in the designated file path.

Apply for a Temporary License

If you'd like to remove the evaluation message from the generated documents, or to get rid of the function limitations, please request a 30-day trial license for yourself.