Add an Image to a Word Document in React

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;
                

npm i spire.doc

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 spiredoc from the global window object
        const { Module, spiredoc } = window;

        // Set the wasmModule state when the runtime is initialized
        Module.onRuntimeInitialized = () => {
          setWasmModule(spiredoc);
        };
      } 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.Doc.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 find and higlight a specified text in Word
  const FindHighlightFirst = async () => {
    if (wasmModule) {

      // Load the sample file into the virtual file system (VFS)
      let inputFileName = 'Spire.docx';
      await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);

      // Create a new document
      const doc = wasmModule.Document.Create();

      // 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
      const outputFileName = 'FindHighlightFirst.docx';
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

      // Release resources
      doc.Dispose();

      // Read the generated Word file from VFS
      const modifiedFileArray = wasmModule.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() {

  // 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 spiredoc from the global window object
        const { Module, spiredoc } = window;

        // Set the wasmModule state when the runtime is initialized
        Module.onRuntimeInitialized = () => {
          setWasmModule(spiredoc);
        };
      } 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.Doc.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 find and higlight a specified text in Word
  const FindAndHighlightAll = async () => {
    if (wasmModule) {

      // Load the sample file into the virtual file system (VFS)
      let inputFileName = 'Spire.docx';
      await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);

      // Create a new document
      const doc = wasmModule.Document.Create();

      // 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
      const outputFileName = 'FindAndHighlight.docx';
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

      // Release resources
      doc.Dispose();

      // Read the generated Word file from VFS
      const modifiedFileArray = wasmModule.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;