npm i spire.office

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const AddPdfImage = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Specify the input and output file paths
      const inputFileName =  "JS.png";
      const outputFileName = "DrawImage.pdf";

      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      // Create a pdf instance
      let pdf =new wasmModule.PdfDocument();

      // Add a page
      let page = pdf.Pages.Add();

      // Load the image 
      let image = wasmModule.PdfImage.FromFile(inputFileName);
    
      // Calculate the scaled width and height of the image
      let width = image.Width * 0.6;
      let height = image.Height * 0.6;
    
      // Calculate the x-coordinate to center the image horizontally on the page
      let x = (page.Canvas.ClientSize.Width - width) / 2;
    
      // Draw the image at a specified location on the page
      page.Canvas.DrawImage({image:image, x:x, y: 60, width: width, height: height});

      // Save the result file
      pdf.SaveToFile({fileName: outputFileName});

      // Clean up resources
      pdf.Close();

      // Read the generated PDF file
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

      // Create a Blob object from the PDF file
      const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });

      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);  
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Images in PDF with JavaScript in React</h1>
      <button onClick={AddPdfImage}>
        Process
      </button>
    </div>
  );
}


export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ReplacePdfImage = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Specify the input and output file paths
      let inputFileName  = ""ReplaceImage.pdf"";
      await window.spire.FetchFileToVFS(inputFileName , '',  `${process.env.PUBLIC_URL}static/data/`);
     
      const inputImageName = "ChartImage.png";
      await window.spire.FetchFileToVFS(inputImageName , '',  `${process.env.PUBLIC_URL}static/data/`);

      const outputFileName = "ReplaceImage_result.pdf";

      // Create a pdf instance
      let pdf =new wasmModule.PdfDocument();
      
      // Load the PDF file
      pdf.LoadFromFile({fileName: inputFileName});

      // Get the first page
      let page = pdf.Pages.get_Item(0);

      // Create a PdfImageHelper instance 
      let helper =new wasmModule.PdfImageHelper();

      // Get the image information from the page
      let images = helper.GetImagesInfo(page);

      // Load a new image
      let newImage = wasmModule.PdfImage.FromFile(inputImageName);

      // Replace the first image on the page with the loaded image
      helper.ReplaceImage(images[0], newImage);

      // Save the result file
      pdf.SaveToFile({fileName: outputFileName});

      // Clean up resources
      pdf.Close();

      // Read the generated PDF file
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

      // Create a Blob object from the PDF file
      const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });

      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);  
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Replace an Image in PDF with JavaScript in React</h1>
      <button onClick={ReplacePdfImage}>
        Process
      </button>
    </div>
  );
}


export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const DeletePdfImage = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Specify the input and output file paths
      let inputFileName  = "DrawImage.pdf";
      await window.spire.FetchFileToVFS(inputFileName , '',  `${process.env.PUBLIC_URL}static/data/`);
    
      const outputFileName = "DeleteImage.pdf";

      // Create a pdf instance
      let pdf =new wasmModule.PdfDocument();

      // Load the PDF file
      pdf.LoadFromFile({fileName: inputFileName});

      // Get the first page
      let page = pdf.Pages.get_Item(0);

      // Create a PdfImageHelper instance 
      let helper =new wasmModule.PdfImageHelper();

      // Get the image information from the page
      let images = helper.GetImagesInfo(page);

      // Delete the first image on the page
      helper.DeleteImage({imageInfo: images[0]});

      // Save the result file
      pdf.SaveToFile({fileName: outputFileName});

      // Clean up resources
      pdf.Close();

      // Read the generated PDF file
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

      // Create a Blob object from the PDF file
      const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });

      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);  
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

   return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Remove an Image from PDF with JavaScript in React</h1>
      <button onClick={DeletePdfImage} disabled={!wasmModule}>
        Process
      </button>
    </div>
  );
}


export default App;

npm i spire.office

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPdfToHTML= async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
      
      // PDF file name to convert
      let inputFileName = "ToHTML.pdf";

      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
 
      // Create a PdfDocument object
      let doc =new wasmModule.PdfDocument();

      // Load the PDF file
      doc.LoadFromFile(inputFileName);
 
      // Define the output file name
      const outputFileName = 'PdfToHtml.html';

      // Save the document to an HTML file
      doc.SaveToFile({fileName: outputFileName, fileFormat: wasmModule.FileFormat.HTML});

      // Read the saved file and convert to a Blob object
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: "text/html" });

      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName ;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to HTML in React Using JavaScript</h1>
      <button onClick={ConvertPdfToHTML} disabled={!wasmModule}>
        Convert
      </button>
    </div>
  );

}

export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);


  const downloadFileFromVFS = (fileName) => {
    const fileArray = window.dotnetRuntime.Module.FS.readFile(fileName);
    const fileBlob = new Blob([fileArray], { type: 'text/html' });
    const url = URL.createObjectURL(fileBlob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const ConvertPdfToHTML = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      await window.spire.FetchFileToVFS("MSYH.TTC", "/Library/Fonts/", `${process.env.PUBLIC_URL}static/font/`);
      
      // Load the input PDF file into the VFS
      let inputFileName = "ToHTML.pdf";
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      let doc = new wasmModule.PdfDocument();
      doc.LoadFromFile(inputFileName);

      const totalPages = doc.Pages.Count;

      // Customize the conversion settings
      doc.ConvertOptions.SetPdfToHtmlOptions({ useEmbeddedSvg: false, useEmbeddedImg: true, maxPageOneFile: 1 });

       // Save the document to an HTML file
      const outputFileName = 'PdfToHtmlOptions.html';
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.HTML });

      doc.Close();
      doc.Dispose();

      console.log(`totalPages: ${totalPages}`);

      for (let i = 1; i <= totalPages; i++) {
        const fileName = `PdfToHtmlOptions_${i}-${i}.html`;
        downloadFileFromVFS(fileName);
      }                 
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to HTML in React Using JavaScript</h1>
      <button onClick={ConvertPdfToHTML}>
        Convert
      </button>
    </div>
  );
}

export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPdfToHTML = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      await window.spire.FetchFileToVFS("MSYH.TTC", "/Library/Fonts/", `${process.env.PUBLIC_URL}static/font/`);
      
      // Load the input PDF file into the VFS
      let inputFileName = "ToHTML.pdf";
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      let doc = new wasmModule.PdfDocument();
      doc.LoadFromFile(inputFileName);

      // Define the output file name
      const outputFileName = 'PdfToHtmlStream.html';
      // Create a new memory stream
     let ms = new wasmModule.Stream();

     // Save the file as HTML stream
     doc.SaveToStream({stream: ms, fileformat: wasmModule.FileFormat.HTML});
     ms.Save(outputFileName);

     // Release resources
     ms.Close();
     doc.Close();

     // Read the saved HTML file and convert to a Blob object
     const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
     const modifiedFile = new Blob([modifiedFileArray], { type: "text/html" });

     // Create a Blob URL and trigger 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);
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to HTML in React Using JavaScript</h1>
      <button onClick={ConvertPdfToHTML}>
        Convert
      </button>
    </div>
  );
}

export default App;

npm i spire.office

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPdfToWord= async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
      
      // PDF file name to convert
      let inputFileName = "ToDocx.pdf";
      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);

      // Create a PdfToDocConverter object
      let converter =new wasmModule.PdfToDocConverter({filePath: inputFileName});

      // Set document properties of the generated Word file
      converter.DocxOptions.Subject = "Convert PDF to Word";
      converter.DocxOptions.Authors = "E-ICEBLUE"
 
      // Define the output file name
      const outputFileName = "ToWord.docx";

      // Convert PDF as a Docx file
      converter.SaveToDocx({fileName: outputFileName});

      // Read the saved file and convert to a Blob object
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: "msword" });

      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName ;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

    return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to Word in React</h1>
      <button onClick={ConvertPdfToWord}>
        Convert
      </button>
    </div>
  );
}

export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPdfToWord= async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
      
      // PDF file name to convert
      let inputFileName = "ToDocx.pdf";

      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
 
      // Create a PdfDocument object
      let doc =new wasmModule.PdfDocument();

      // Load the PDF file
      doc.LoadFromFile(inputFileName);
 
      // Define the output file name
      const outputFileName = "ToWord.docx";

      // Convert PDF as a Docx file
      doc.SaveToFile({fileName: outputFileName,fileFormat: wasmModule.FileFormat.DOCX});

      // Read the saved file and convert to a Blob object
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: "msword" });

      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName ;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to Word in React</h1>
      <button onClick={ConvertPdfToWord}>
        Convert
      </button>
    </div>
  );

}

export default App;

npm i spire.office

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

function App() {
   // Store WASM module instance
   const [wasmModule, setWasmModule] = useState(null);
   
   // Load WASM module when component mounts
   useEffect(() => {
    const loadSpire = async () => {
      try {
        // Get public directory path
        const publicUrl = process.env.PUBLIC_URL || '';
        // Path to WASM JS glue code
        const moduleUrl = `${publicUrl}/spire.pdf.js`;
        
        // Dynamically import WASM module
        const spireModule = await import(
          /* webpackIgnore: true */ 
          moduleUrl
        );
        
        // Extract module exports
        let Module = spireModule.default || spireModule;
        
        // Handle WASM initialization
        if (typeof Module === 'function') {
          Module = await Module({
            // Callback when WASM runtime initialization is complete
            onRuntimeInitialized: () => {
              console.log('Spire WASM runtime initialized');
              // Set module state after initialization
              setWasmModule(Module);
            },
            // Handle WASM file paths
            locateFile: (path) => {
              if (path.endsWith('.wasm')) {
                return `${publicUrl}/${path}`;
              }
              return path;
            }
          });
        } else {
          // If not a function, set module directly
          setWasmModule(Module);
        }
        
        // Mount module to window object for global access
        window.Module = Module;                
        window.wasmModule = Module;
        
        return Module;
        
      } catch (error) {
        console.error('Failed to load spire.pdf.js:', error);
        throw error;
      }
    };

    // Execute load function
    loadSpire();
  }, []); 

  const ConvertPDFToExcel= async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
      
      // PDF file name to convert
      let inputFileName = "ChartSample.pdf";

      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      
      // Create PDF document object
      let doc = new wasmModule.PdfDocument();
      
      // Load PDF file
      doc.LoadFromFile(inputFileName);

      // Define the output file name
      const outputFileName = "ToXLSX_result.xlsx";

      // Save the document to the specified path
      doc.SaveToFile({fileName: outputFileName,fileFormat: wasmModule.FileFormat.XLSX});
      doc.Close();

      // Read the saved file and convert to a 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
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName ;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

   return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to Excel in React</h1>
      <button onClick={ConvertPDFToExcel}>
        Convert
      </button>
    </div>
  );
}

export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPDFToExcelXlsxLineLayoutOptions = async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
      
      // PDF file name to convert
      let inputFileName = "PdfToExcel.pdf";

      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      
      // Create PDF document object
      let doc = new wasmModule.PdfDocument();
      
      // Load PDF file
      doc.LoadFromFile(inputFileName);

      doc.ConvertOptions.SetPdfToXlsxOptions(
          new wasmModule.XlsxLineLayoutOptions({convertToMultipleSheet: false, rotatedText: true, splitCell: true}));

      // Define the output file name
      const outputFileName = "PdfToExcelOptions_out.xlsx";

      // Save the document to the specified path
      doc.SaveToFile({fileName: outputFileName,fileFormat: wasmModule.FileFormat.XLSX});
      doc.Close();
        
      // Read the generated JPG file
      const modifiedFileArray =window.dotnetRuntime.Module.FS.readFile(outputFileName);
      // Create a Blob object from the JPG file
      const modifiedFile = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);
              
      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
      
    }
  };

   return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to Excel with XlsxLineLayoutOptions Using JavaScript in React</h1>
        <button onClick={ConvertPDFToExcelXlsxLineLayoutOptions}>
          Convert and Download
        </button>
    </div>
  );
}

export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPDFToExcelXlsxTextLayoutOptions = async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
      
      // PDF file name to convert
      let inputFileName = "PdfToExcel.pdf";

      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      
      // Create PDF document object
      let doc = new wasmModule.PdfDocument();
      
      // Load PDF file
      doc.LoadFromFile(inputFileName);

      // Create an instance of the XlsxTextLayoutOptions class and specify the conversion options
      const options =new wasmModule.XlsxTextLayoutOptions({ convertToMultipleSheet: false, rotatedText: true, overlapText: true});

      // Set the XlsxTextLayoutOptions instance as the conversion options
      doc.ConvertOptions.SetPdfToXlsxOptions(options);

      // Define the output file name
      const outputFileName = "PDFToExcelXlsxTextLayoutOptions.xlsx";

      // Save the document to the specified path
      doc.SaveToFile({fileName: outputFileName,fileFormat: wasmModule.FileFormat.XLSX});
      doc.Close();
        
      // Read the generated JPG file
      const modifiedFileArray =window.dotnetRuntime.Module.FS.readFile(outputFileName);
      // Create a Blob object from the JPG file
      const modifiedFile = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); 
      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);
              
      // Create an anchor element to trigger the download
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
      
    }
  };

   return (
      <div style={{ textAlign: 'center', height: '300px' }}>
        <h1>Convert PDF to Excel with XlsxTextLayoutOptions Using JavaScript in React</h1>
        <button onClick={ConvertPDFToExcelXlsxTextLayoutOptions}>
          Convert and Download
        </button>
      </div>
  );
}

export default App;

npm i spire.office

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPdfToJpg = async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;

    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);

      // PDF file name to convert
      let inputFileName = "ToImage.pdf";

      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);

      // Create PDF document object
      let doc = new wasmModule.PdfDocument();

      // Load PDF file
      doc.LoadFromFile(inputFileName);

      let outFileName ="";
        //Save to images
        for (let i=0;i<doc.Pages.Count;i++) {
              outFileName = `ToImage-img-${i}.jpeg`;
              let pdfstream = doc.SaveAsImage({pageIndex: i});
              pdfstream.Save(outFileName);

              // Read the generated JPG file
              const modifiedFileArray =window.dotnetRuntime.Module.FS.readFile(outFileName);
              // Create a Blob object from the JPG file
              const modifiedFile = new Blob([modifiedFileArray], { type:'image/jpeg' });
              // Create a URL for the Blob
              const url = URL.createObjectURL(modifiedFile);

              // Create an anchor element to trigger the download
              const a = document.createElement('a');
              a.href = url;
              a.download = outFileName;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
              URL.revokeObjectURL(url);
          }
    }
  };

   return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to JPG in React</h1>
      <button onClick={ConvertPdfToJpg}>
        Convert
      </button>
    </div>
    );
    }

    export default App;
                

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPdfToPng = async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;

    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf", "/Library/Fonts/", `${process.env.PUBLIC_URL}/`);

      // PDF file name to convert
      let inputFileName = "ToImage.pdf";

      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);

      // Create PDF document object
      let doc = new wasmModule.PdfDocument();

      // Load PDF file
      doc.LoadFromFile(inputFileName);

      let outFileName ="";
        //Save to images
        for (let i=0;i<doc.Pages.Count;i++) {
              outFileName = "ToImage-img-${i}.png";
              let pdfstream = doc.SaveAsImage({pageIndex: i});
              pdfstream.Save(outFileName);

              // Read the generated JPG file
              const modifiedFileArray =window.dotnetRuntime.Module.FS.readFile(outFileName);
              // Create a Blob object from the JPG file
              const modifiedFile = new Blob([modifiedFileArray], { type:'image/png' });
              // Create a URL for the Blob
              const url = URL.createObjectURL(modifiedFile);

              // Create an anchor element to trigger the download
              const a = document.createElement('a');
              a.href = url;
              a.download = outFileName;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
              URL.revokeObjectURL(url);
          }
    }
  };

   return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to PNG in React</h1>
      <button onClick={ConvertPdfToPng}>
        Convert
      </button>
    </div>
    );
    }

    export default App;
                

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ConvertPdfToSvg = async () => {
    // Get WASM module
    const wasmModule = window.wasmModule.spirepdf;

    if (wasmModule) {
      // Load font file to virtual file system (VFS)
      await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);

      // PDF file name to convert
      let inputFileName = "ToImage.pdf";

      // Load PDF file to virtual file system (VFS)
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);

      // Create PDF document object
      let doc = new wasmModule.PdfDocument();

      // Load PDF file
      doc.LoadFromFile(inputFileName);

      let outFileName ="";
        //Save to images
        for (let i=0;i<doc.Pages.Count;i++) {
              outFileName = `ToImage-img-${i}.svg`;
              let pdfstream = doc.SaveAsImage({pageIndex: i});
              pdfstream.Save(outFileName);

              // Read the generated JPG file
              const modifiedFileArray =window.dotnetRuntime.Module.FS.readFile(outFileName);
              // Create a Blob object from the JPG file
              const modifiedFile = new Blob([modifiedFileArray], { type:"image/svg+xml" });
              // Create a URL for the Blob
              const url = URL.createObjectURL(modifiedFile);

              // Create an anchor element to trigger the download
              const a = document.createElement('a');
              a.href = url;
              a.download = outFileName;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
              URL.revokeObjectURL(url);
          }
    }
  };

   return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to SVG in React</h1>
      <button onClick={ConvertPdfToSvg}>
        Convert
      </button>
    </div>
    );
    }

    export default App;
                

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

function App() {
  const [wasmModule, setWasmModule] = useState(null);
  // Load Spire.Doc
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.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.doc.js WASM module:', error);
      }
    })();
  }, []);

  // Function to find and higlight a specified text in Word
  const FindHighlightFirst  = async () => {
    const wasmModule = window.wasmModule.spiredoc;

    if (wasmModule) {
      // Load the font files into the virtual file system (VFS)
      await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

      // Specify the input file name and the output file name
      const inputFileName = 'input.docx';
      const outputFileName = 'FindHighlightFirst.docx';

      // Fetch the input file and add it to the VFS
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

      // Create an instance of the Document class
      const doc = new wasmModule.Document();

      // Load the Word document
      doc.LoadFromFile(inputFileName);

      // Find the first instance of a specific text
      let textSelection = doc.FindString('Spire.Doc for JavaScript', false, true);

      // Get the instance as a single text range
      let textRange = textSelection.GetAsOneRange();

      // Set highlight color
      textRange.CharacterFormat.HighlightColor = wasmModule.Color.get_Yellow();

      // Save the result document
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

      // Release resources
      doc.Dispose();

      // Read the generated Word file from VFS
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

      // Create a Blob object from the Word file
      const modifiedFile = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
      
      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement("a");
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };
     
  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Find and Highlight Specified Text in Word Using JavaScript in React</h1>
      <button onClick={FindHighlightFirst} disabled={!wasmModule}>
      Execute
      </button>
    </div>
 );
}

export default App;

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

function App() {
  const [wasmModule, setWasmModule] = useState(null);
  // Load Spire.Doc
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.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.doc.js WASM module:', error);
      }
    })();
  }, []);

  // Function to find and higlight a specified text in Word
  const FindAndHighlightAll   = async () => {
    const wasmModule = window.wasmModule.spiredoc;

    if (wasmModule) {
      // Load the font files into the virtual file system (VFS)
      await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

      // Specify the input file name and the output file name
      const inputFileName = 'input.docx';
      const outputFileName = 'FindAndHighlight.docx';

      // Fetch the input file and add it to the VFS
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

      // Create an instance of the Document class
      const doc = new wasmModule.Document();

      // Load the Word document
      doc.LoadFromFile(inputFileName);

      // Find all occurrences of the specified text in the document
      let textSelections = doc.FindAllString('Spire.Doc for JavaScript', false, true);

      // Iterate through all found text selections
      for (let i = 0; i < textSelections.length; i++) {
        let selection = textSelections[i];

        // Set highlight color 
        selection.GetAsOneRange().CharacterFormat.HighlightColor = wasmModule.Color.get_Yellow();
      }

      // Save the result document
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

      // Release resources
      doc.Dispose();

      // Read the generated Word file from VFS
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

      // Create a Blob object from the Word file
      const modifiedFile = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
      
      // Create a URL for the Blob
      const url = URL.createObjectURL(modifiedFile);

      // Create an anchor element to trigger the download
      const a = document.createElement("a");
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };
     
  return (
    <<div style={{ textAlign: 'center', height: '300px' }}>
      <<h1>Find and Highlight Specified Text in Word Using JavaScript in React<</h1>
      <<button onClick={FindAndHighlightAll} disabled={!wasmModule}>
      Execute
      <</button>
    </div>
 );
}

export default App;

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 lock specific cells in Excel
  const LockExcelCells = 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 = 'sample.xlsx';
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);


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

      // Load the Excel file from the virtual file system
      workbook.LoadFromFile({ fileName: inputFileName });

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

      // Unlock all cells in the used range of the worksheet
      sheet.Range.Style.Locked = false;

      // Lock a specific cell in the worksheet
      sheet.Range.get("A1").Text = "Locked";
      sheet.Range.get("A1").Style.Locked = true;

      // Lock a specific cell range in the worksheet
      sheet.Range.get("C1:E3").Text = "Locked";
      sheet.Range.get("C1:E3").Style.Locked = true;

      // Protect the worksheet with a password
      sheet.Protect({ password: "123", options: wasmModule.SheetProtectionType.All });

      let outputFileName = "LockCells.xlsx";
      // Save the resulting file
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2013 });

      // 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>Lock Specific Cells in Excel Using JavaScript in React</h1>
      <button onClick={LockExcelCells} disabled={!wasmModule}>
        Lock
      </button>
    </div>
  );
}

export default App;

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 lock specific rows in Excel
  const LockExcelRows = 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 = 'sample.xlsx';
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);


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

      // Load the Excel file from the virtual file system
      workbook.LoadFromFile({ fileName: inputFileName });

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

      // Unlock all cells in the used range of the worksheet
      sheet.Range.Style.Locked = false;

      // Lock the third row in the worksheet
      sheet.Rows.get(2).Text = "Locked";
      sheet.Rows.get(2).Style.Locked = true;

      // Protect the worksheet with a password
      sheet.Protect({ password: "123", options: wasmModule.SheetProtectionType.All });

      let outputFileName = "LockRows.xlsx";
      // Save the resulting file
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2013 });

      // 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>Lock Specific Rows in Excel Using JavaScript in React</h1>
      <button onClick={LockExcelRows} disabled={!wasmModule}>
        Lock
      </button>
    </div>
  );
}

export default App;

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 lock specific columns in Excel
  const LockExcelColumns = 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 = 'sample.xlsx';
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);


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

      // Load the Excel file from the virtual file system
      workbook.LoadFromFile({ fileName: inputFileName });

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

      // Unlock all cells in the used range of the worksheet
      sheet.Range.Style.Locked = false;

      // Lock the fourth column in the worksheet
      sheet.Columns.get(3).Text = "Locked";
      sheet.Columns.get(3).Style.Locked = true;

      // Protect the worksheet with a password
      sheet.Protect({ password: "123", options: wasmModule.SheetProtectionType.All });

      let outputFileName = "LockColumns.xlsx";
      // Save the resulting file
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2013 });

      // 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>Lock Specific Columns in Excel Using JavaScript in React</h1>
      <button onClick={LockExcelColumns} disabled={!wasmModule}>
        Lock
      </button>
    </div>
  );
}

export default App;

npm i spire.office

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ExtractPDFText = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {     
      // Load the input PDF file into the VFS
      const inputFileName = 'Sample.pdf';
      const outputFileName = 'PDFTextWithLayout.txt';
      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      let pdf = new wasmModule.PdfDocument();
      pdf.LoadFromFile(inputFileName);

      // Create a string object to store the extracted text
      let text = '';

      // Create an instance of the PdfTextExtractOptions class
      const extractOptions =new wasmModule.PdfTextExtractOptions();

      // Iterate through each page of the PDF document
      for (let i = 0; i < pdf.Pages.Count; i++) {
        // Get the current page
        const page = pdf.Pages.get_Item(i);
        // Create an instance of the PdfTextExtractor class
        const textExtractor =new wasmModule.PdfTextExtractor(page);
        // Extract the text from the current page and add it to the text string
        text += textExtractor.ExtractText(extractOptions);
      }

      // Create a Blob object from the text string and download it
      const blob = new Blob([text], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${outputFileName}`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

    }
  };

  return (
      <div style={{ textAlign: 'center', height: '300px' }}>
        <h1>Extract Text from PDF Using JavaScript in React</h1>
        <button onClick={ExtractPDFText}>
          Extract and Download
        </button>
      </div>
  );
}


export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ExtractPDFText = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load the input PDF file into the VFS
      const inputFileName = 'Sample.pdf';
      const outputFileName = 'PDFTextWithoutLayout.txt';

      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      let pdf = new wasmModule.PdfDocument();
      pdf.LoadFromFile(inputFileName);

       // Create a string object to store the extracted text
      let text = '';

      // Create an instance of the PdfTextExtractOptions class
      const extractOptions =new wasmModule.PdfTextExtractOptions();

      // Enable simple text extraction to extract text without preserving layout
      extractOptions.IsSimpleExtraction = true;

      // Iterate through each page of the PDF document
      for (let i = 0; i < pdf.Pages.Count; i++) {
        // Get the current page
        const page = pdf.Pages.get_Item(i);
        // Create an instance of the PdfTextExtractor class
        const textExtractor =new wasmModule.PdfTextExtractor(page);
        // Extract the text from the current page and add it to the text string
        text += textExtractor.ExtractText(extractOptions);
      }

      // Create a Blob object from the text string and download it
      const blob = new Blob([text], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${outputFileName}`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };

  return (
      <div style={{ textAlign: 'center', height: '300px' }}>
        <h1>Extract Text from PDF Without Layout Preservation Using JavaScript in React</h1>
        <button onClick={ExtractPDFText} disabled={!wasmModule}>
          Extract and Download
        </button>
      </div>
  );
}


export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ExtractPDFText = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load the input PDF file into the VFS
      const inputFileName = 'Sample.pdf';
      const outputFileName = 'PDFTextPageArea.txt';

      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      let pdf = new wasmModule.PdfDocument();
      pdf.LoadFromFile(inputFileName);

       // Create a string object to store the extracted text
      let text = '';

      // Get a page from the PDF document
      const page = pdf.Pages.get_Item(0);

      // Create an instance of the PdfTextExtractOptions class
      const extractOptions =new wasmModule.PdfTextExtractOptions();

      // Set the page area to extract text from using a RectangleF object
      extractOptions.ExtractArea =new wasmModule.RectangleF({ x: 0, y: 500, width: page.Size.Width, height: 200});

      // Create an instance of the PdfTextExtractor class
      const textExtractor =new wasmModule.PdfTextExtractor(page);

      // Extract the text from specified area of the page
      text = textExtractor.ExtractText(extractOptions);

      // Create a Blob object from the text string and download it
      const blob = new Blob([text], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${outputFileName}`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };

  return (
      <div style={{ textAlign: 'center', height: '300px' }}>
        <h1>Extract Text from a PDF Page Area Using JavaScript in React</h1>
        <button onClick={ExtractPDFText} disabled={!wasmModule}>
          Extract and Download
        </button>
      </div>
  );
}



export default App;

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

function App() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.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.pdf.js:', error);
      }
    })();
  }, []);

  const ExtractPDFText = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Load the input PDF file into the VFS
      const inputFileName = 'Sample.pdf';
      const outputFileName = 'PDFTextHighlighted.txt';

      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      let pdf = new wasmModule.PdfDocument();
      pdf.LoadFromFile(inputFileName);

       // Create a string object to store the extracted text
      let text = '';

      // Iterate through each page of the PDF document
      for (let i = 0; i < pdf.Pages.Count; i++) {
        let page = pdf.Pages.get_Item(i);
        // Iterate through each annotation on the page
        for (let i = 0; i < page.Annotations.Count; i++) {
          // Get the current annotation
          const annotation = page.Annotations.get_Item(i)
          // Check if the annotation is an instance of PdfTextMarkupAnnotation
          if (annotation instanceof wasmModule.PdfTextMarkupAnnotationWidget) {
            // Get the bounds of the annotation
            const bounds = annotation.Bounds;
            // Create an instance of PdfTextExtractOptions
            const extractOptions =new wasmModule.PdfTextExtractOptions();
            // Set the bounds of the highlight annotation as the extraction area
            extractOptions.ExtractArea = bounds;
            //
            const textExtractor =new wasmModule.PdfTextExtractor(page)
            // Extract the highlighted text and append it to the text string
            text += textExtractor.ExtractText(extractOptions);
          }
        }
      }

      // Create a Blob object from the text string and download it
      const blob = new Blob([text], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${outputFileName}`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };

  return (
      <div style={{ textAlign: 'center', height: '300px' }}>
        <h1>Extract Highlighted Text from PDF Using JavaScript in React</h1>
        <button onClick={ExtractPDFText} disabled={!wasmModule}>
          Extract and Download
        </button>
      </div>
  );
}


export default App;

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

function App() {
  const [wasmModule, setWasmModule] = useState(null);
  // Load Spire.Doc
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.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.doc.js WASM module:', error);
      }
    })();
  }, []);

  // Function add a text watermark
  const AddWatermark = async () => {
    const wasmModule = window.wasmModule.spiredoc;

    if (wasmModule) {
      // Load the font files into the virtual file system (VFS)
      await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

      // Specify the input file name and the output file name
      const outputFileName = "TextWatermark.docx";
      const inputFileName = 'input.docx';

      // Fetch the input file and add it to the VFS
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

      // Create an instance of the Document class
      const doc = new wasmModule.Document();

      // Load the Word document
      doc.LoadFromFile(inputFileName);

      // Create a TextWatermark instance
      let txtWatermark =new wasmModule.TextWatermark();

      // Set the text for the watermark
      txtWatermark.Text = "Do Not Copy";

      // Set the font size and name for the text
      txtWatermark.FontSize = 58;
      txtWatermark.FontName = "Arial"

      // Set the color of the text
      txtWatermark.Color = wasmModule.Color.get_Blue();

      // Set the layout of the watermark to diagonal
      txtWatermark.Layout = wasmModule.WatermarkLayout.Diagonal;

      // Apply the text watermark to the document
      doc.Watermark = txtWatermark;

      // Save the document to the specified path
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

      // Read the generated file from VFS
      const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

      // Create a Blob object from the file
      const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });

      // Create a URL for the Blob
      const url = URL.createObjectURL(blob);

      // Create an anchor element to trigger the download
      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
      doc.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add a Text Watermark to Word in React</h1>
      <button onClick={AddWatermark} disabled={!wasmModule}>
        Generate
      </button>
    </div>
  );
}

export default App;

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

function App() {
  const [wasmModule, setWasmModule] = useState(null);
  // Load Spire.Doc
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.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.doc.js WASM module:', error);
      }
    })();
  }, []);

  // Function add an image watermark
  const AddWatermark = async () => {
    const wasmModule = window.wasmModule.spiredoc;

    if (wasmModule) {
      // Load the font files into the virtual file system (VFS)
      await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

      // Specify the input file name and the output file name
      const outputFileName = 'ImageWatermark.docx';
      const inputFileName = 'input.docx';
      const imageFileName = 'logo.png';

      // Fetch the input file and add it to the VFS
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
      await window.spire.FetchFileToVFS(imageFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

      // Create an instance of the Document class
      const doc = new wasmModule.Document();

      // Load the Word document
      doc.LoadFromFile(inputFileName);

      // Create a new PictureWatermark instance
      const pictureWatermark = new wasmModule.PictureWatermark();

      // Set the picture
      pictureWatermark.SetPicture(imageFileName);

      // Set the scaling factor of the image
      pictureWatermark.Scaling = 150;

      // Disable washout effect
      pictureWatermark.IsWashout = false;

      // Apply the image watermark to the document
      doc.Watermark = pictureWatermark;

      // Save the document to the specified path
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

      // Read the generated file from VFS
      const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

      // Create a Blob object from the file
      const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });

      // Create a URL for the Blob
      const url = URL.createObjectURL(blob);

      // Create an anchor element to trigger the download
      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
      doc.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add an Image Watermark to Word in React</h1>
      <button onClick={AddWatermark} disabled={!wasmModule}>
        Generate
      </button>
    </div>
  );
}

export default App;

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 merge Excel workbooks into one
  const MergeExcelWorkbooks = 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)
      const files = [
        "File1.xlsx",
        "File2.xlsx",
        "File3.xlsx",
      ];
      for (const file of files) {
        await window.spire.FetchFileToVFS(file, '', `${process.env.PUBLIC_URL}/static/data/`);
      }

      // Create a new workbook
      let newbook = new wasmModule.Workbook();
      newbook.Version = wasmModule.ExcelVersion.Version2013;

      // Clear the default worksheets
      newbook.Worksheets.Clear();

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

      for (const file of files) {

        // Load the current file
        tempbook.LoadFromFile(file.split("/").pop());

        for (let i = 0; i < tempbook.Worksheets.Count; i++) {
          let sheet = tempbook.Worksheets.get(i);

          // Copy every sheet in the current file to the new workbook
          wasmModule.XlsWorksheetsCollection.Convert(
            newbook.Worksheets
          ).AddCopy({
            sheet: sheet,
            flags: wasmModule.WorksheetCopyType.CopyAll,
          });
        }
      }

      let outputFileName = "MergeExcelWorkbooks.xlsx";
      // Save the resulting file
      newbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2013 });

      // 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
      newbook.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Merge Multiple Excel Workbooks into One Using JavaScript in React</h1>
      <button onClick={MergeExcelWorkbooks} disabled={!wasmModule}>
        Merge
      </button>
    </div>
  );
}

export default App;

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 merge worksheets in an Excel workbook into one
  const MergeWorksheets = 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 = 'sample.xlsx';
      await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);


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

      // Load the Excel file from the virtual file system
      workbook.LoadFromFile(inputFileName);

      // Get the first worksheet
      let sheet1 = workbook.Worksheets.get(0);
      // Get the second worksheet
      let sheet2 = workbook.Worksheets.get(1);

      // Get the used range in the second worksheet
      let fromRange = sheet2.AllocatedRange;
      // Specify the destination range in the first worksheet
      let toRange = sheet1.Range.get({ row: sheet1.LastRow + 1, column: 1 });

      // Copy the used range from the second worksheet to the destination range in the first worksheet
      fromRange.Copy({ destRange: toRange });

      // Remove the second worksheet
      sheet2.Remove();

      // Define the output file name
      const outputFileName = "MergeWorksheets.xlsx";

      // Save the workbook to the specified path
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });

      // 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>Merge Multiple Excel Worksheets into One Using JavaScript in React</h1>
      <button onClick={MergeWorksheets} disabled={!wasmModule}>
        Merge
      </button>
    </div>
  );
}

export default App;