SpreadJS, our React spreadsheet API, supports importing and exporting complex Excel (.XLSX) files with the Excel IO module. The Excel IO module contains pure JavaScript logic for importing and exporting built right into it with no dependencies to Excel. This is very useful when you need to make your application platform independent. There is a live demo that shows how to import Excel files from a user’s system in React, but SpreadJS also supports importing Excel files from a specified URL. Below I discuss how to utilize the SpreadJS API for the Excel IO element in a React app to import Excel files from a specified URL.

To accomplish this:

Get Started in Your Own React App!

Download the latest version of SpreadJS

Download Now!

Step 1: React Project Set Up with SpreadJS Excel IO:

See our documentation here for steps on using SpreadJS and the Excel IO module in a React App.

This starts by creating a React project that references the needed SpreadJS library scripts and CSS files listed below:

  • spread.sheets.all.x.x.x.min.js
  • spread.excelio.x.x.x.min.js – must be included to import and export Excel files
  • spread.sheets.charts.x.x.x.min.js – must be included to view charts in SpreadJS
  • spread.sheets.shapes.x.x.x.min.js – must be included to view shapes in SpreadJS
  • spread.sheets.excel2013white.css

You can get these files from the SpreadJS release download or from NPM.

Note: SpreadJS will work locally with no license key but if you are deploying the page, you need to set a SpreadJS and Excel IO distribution license key before the workbook is created.

<script>
var licenseKey = "<add your SpreadJS distribution key here. Contact us.sales@grapecity to request a temp key>";
GC.Spread.Sheets.LicenseKey = licenseKey;
excelIO.LicenseKey = licenseKey;
</script>

Step 2: Fetch the URL Return as a Blob

Next, add two HTML input elements to the body of the page:

  • Input type, used to specify the URL. For this example we are using this Excel file link.
  • Input button type, used to import the file from the URL on click
render() {
       return <div class="sample-tutorial">
           <div class="sample-spreadsheets">
               <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
                   <Worksheet>
                   </Worksheet>
               </SpreadSheets>
           </div>
           <div className="options-container">
               <input id="importURL" value="https://cdn.grapecity.com/support/spread/Kevin%20Ashley/export.xlsx" />
               <input type="button" className="button" id="loadFromURL" defaultValue="Import from URL"  onClick={e=>this.loadFromURL(e)} />
            </div>
       </div>;
   }

Create a new function, loadFromURL, to get the URL from the input:

loadFromURL(e){
        let spread = this.spread;
        let excelIo = new IO();
        var url = document.getElementById("importURL").value;
}

Then using the Fetch API, set up a fetch request to return the URL's data as a blob.

loadFromURL(e){
        let spread = this.spread;
        let excelIo = new IO();
        var url = document.getElementById("importURL").value;

        fetch(url)
          .then((res) => res.blob()) // returns URL's Excel file data as a blob
          });
    }

Step 3: Import Blob from URL to SpreadJS

Our final step is to import the blob to the SpreadJS instance using Excel IO’s open method and the SpreadJS’s fromJSON method:

loadFromURL(e){
        let spread = this.spread;
        let excelIo = new IO();

        var url = document.getElementById("importURL").value;
        fetch(url)
          .then((res) => res.blob()) // returns URL's Excel file data as a blob
          .then((blob) => {             
            excelIo.open( // Use the Excel IO open method to import blob to SpreadJS
              blob,
              (json) => {
                spread.fromJSON(json);
              },
              (message) => {
                console.log(message);
              }
            );
          });
        }

And just like that, you can now import an Excel file from a specified URL to your SpreadJS JavaScript application using the Excel IO module.

 

Try SpreadJS's spreadsheet components

Download the latest version of SpreadJS

Download Now!