How to Read Excel XLSX Files from a URL Using JavaScript
Tags: webdev, devops, javascript, tutorial
Published: 2024-05-29 13:31:26

---
canonical_url: https://developer.mescius.com/blogs/how-to-read-excel-xlsx-files-from-a-url-using-javascript
description: Learn how to read Excel XLSX files from a URL using JavaScript. See more from SpreadJS today.
---
**What You Will Need**
- Visual Studio Code
- [SpreadJS Release Files](https://developer.mescius.com/spreadjs/download)

**Controls Referenced**
- [SpreadJS - JavaScript Spreadsheet Component](https://developer.mescius.com/spreadjs)
- [Documentation](https://developer.mescius.com/spreadjs/docs/overview) | [Demos](https://developer.mescius.com/spreadjs/demos)

**Tutorial Concept**

Fetch and read Excel files from a URL into a JavaScript spreadsheet application.

---
[SpreadJS, our JavaScript spreadsheet API](https://developer.mescius.com/spreadjs "https://developer.mescius.com/spreadjs"), contains pure JavaScript logic for importing and exporting Excel XLSX files built right into its API with no dependencies on Microsoft Excel. This is very useful when you need to make your application platform independent. While we currently feature a live demo highlighting SpreadJS’ versatility in [opening and saving files from various formats on a user’s system](https://developer.mescius.com/spreadjs/demos/features/spreadjs-file-format/overview/ "https://developer.mescius.com/spreadjs/demos/features/spreadjs-file-format/overview/"), the JavaScript API also supports the direct import of Excel files from specified URLs. In this blog, we'll explore how to leverage the SpreadJS JavaScript spreadsheet API to effortlessly import and read Excel files from designated URLs.

![Read XLSX JavaScript](//cdn.mescius.io/umb/media/ze3f53d4/read-xlsx-javascript.png?rmode=max&width=702&height=351)

## Read Excel XLSX Files from a URL in a JavaScript Application

1.  [Create a JavaScript Spreadsheet Application](#Create)
2.  [](https://grapecity.atlassian.net/wiki/spaces/UMT/pages/3635478718/REWRITE+How+to+Read+Excel+XLSX+Files+from+a+URL+Using+JavaScript#fetch-xlsx "#fetch-xlsx")[Fetch XLSX from the URL and Return the File as a Blob](#Fetch)
3.  [](https://grapecity.atlassian.net/wiki/spaces/UMT/pages/3635478718/REWRITE+How+to+Read+Excel+XLSX+Files+from+a+URL+Using+JavaScript#read-xlsx "#read-xlsx")[Read the Excel File Blob and Import it to the JS Spreadsheet Instance](#Read)

<div style="background: #dfe2e6; padding: 15px;">

[Download the sample application and follow along with the blog.](https://cdn.mescius.io/umb/media/5bxny5wf/sjs-read-xlsx-from-url.zip)

</div>

## <a id="Create"></a>Create a JavaScript Spreadsheet Application

Start by creating a simple HTML file and include the needed SpreadJS release files, including:

*   **Main SJS Library**: spread.sheets.all.x.x.x.min.js
*   **Plug-Ins**:

*   gc.spread.sheets.io – provides import/export Excel support
*   spread.sheets.charts.x.x.x.min.js – provides chart support
*   spread.sheets.shapes.x.x.x.min.js – provides shape support

*   **CSS Spreadsheet Theme:**

*   spread.sheets.excel2013white.css - [several SpreadJS themes to choose from!](https://developer.mescius.com/spreadjs/docs/features/styletheme#site_main_content-doc-content_title "https://developer.mescius.com/spreadjs/docs/features/styletheme#site_main_content-doc-content_title")

The code below references the **v17.0.8** build of SpreadJS. Be sure to update the version numbers based on the version you download.

```
    <!doctype html>
    <html lang="en" style="height:100%;font-size:14px;">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- SpreadJS Release Files -->
        <link rel="stylesheet" type="text/css" href="SpreadJS.Release.17.0.8/SpreadJS/css/gc.spread.sheets.excel2013lightGray.17.0.8.css" />
        <script src="SpreadJS.Release.17.0.8/SpreadJS/scripts/gc.spread.sheets.all.17.0.8.min.js" type="text/javascript"></script>
        <script src="SpreadJS.Release.17.0.8/SpreadJS/scripts/plugins/gc.spread.sheets.io.17.0.8.min.js" type="text/javascript"></script>
        <script src="SpreadJS.Release.17.0.8/SpreadJS/scripts/plugins/gc.spread.sheets.shapes.17.0.8.min.js" type="text/javascript"></script>
        <script src="SpreadJS.Release.17.0.8/SpreadJS/scripts/plugins/gc.spread.sheets.charts.17.0.8.min.js" type="text/javascript"></script>
    </head>
    <body>      
    </body>
    </html>
```

Next, add a script to initialize the SpreadJS Workbook component and a div element to contain it. For this blog, we will also need an Input Type to specify the XLSX URL and an Input Button Type to invoke the import of the Excel file.

```
    <!doctype html>
    <html lang="en" style="height:100%;font-size:14px;">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- SpreadJS Release Files -->
        <link rel="stylesheet" type="text/css" href="SpreadJS.Release.17.0.8/SpreadJS/css/gc.spread.sheets.excel2013lightGray.17.0.8.css" />
        <script src="SpreadJS.Release.17.0.8/SpreadJS/scripts/gc.spread.sheets.all.17.0.8.min.js" type="text/javascript"></script>
        <script src="SpreadJS.Release.17.0.8/SpreadJS/scripts/plugins/gc.spread.sheets.io.17.0.8.min.js" type="text/javascript"></script>
        <script src="SpreadJS.Release.17.0.8/SpreadJS/scripts/plugins/gc.spread.sheets.shapes.17.0.8.min.js" type="text/javascript"></script>
        <script src="SpreadJS.Release.17.0.8/SpreadJS/scripts/plugins/gc.spread.sheets.charts.17.0.8.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            window.onload = function () {
                // Initialize the JavaScript spreadsheet instance
                var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        </script>
    </head>
    <body>
        <!-- JS spreadsheet workbook host element -->
        <div class="container">
            <div id="ss" style="width:75%;height:600px"></div>
            <div class="options">
                <H3>Import URL</H3>
                <!-- Input type for URL -->
                <input id="importURL" value="/media/bwyhahmx/profit-loss-statement.xlsx" />
                <!-- Button to invoke XLSX 
                import-->
                <button id="loadFromURL">Import Excel from URL</button>
            </div>
        </div>
    </body>
    </html>
```

The JavaScript spreadsheet UI component can now be seen in the browser.

![JavaScript spreadsheet UI component](//cdn.mescius.io/umb/media/cnznl2dk/javascript-spreadsheet-ui-component.png?rmode=max&width=760&height=380)

<div style="background: #dfe2e6; padding: 15px;">

**License Information**

No license key is needed to use SpreadJS locally, but a Hostname License is required when deploying a web page displaying SpreadJS. [Check out the documentation](https://developer.mescius.com/spreadjs/docs/getstarted/trial_SpreadJS "https://developer.mescius.com/spreadjs/docs/getstarted/trial_SpreadJS") for license information.

</div>

## <a id="Fetch"></a>Fetch XLSX from the URL and Return the File as a Blob

Implement a click event listener to capture button clicks and retrieve the URL inputted by the user. Utilize the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch") to establish a fetch request within the event, retrieving the Excel Workbook data from the provided link in blob format.

```
    <script type="text/javascript">
      window.onload = function () {
        // Initialize the JavaScript spreadsheet instance
        var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        // Fetch XLSX from URL and Return the File as a Blob
        document.getElementById('loadFromURL').addEventListener('click', function () {
            var url = document.getElementById("importURL").value;
            fetch(url)
              .then(res => res.blob()) // returns URL data a blob
              .then((blob) => {
                    console.log(blob);
               });
        })
      }
    </script>
```

<div style="background: #dfe2e6; padding: 15px;">

**Import Note**

When developing web apps that fetch resources from external domains, you may encounter CORS errors like "_No 'Access-Control-Allow-Origin' header._"

![CORS error](//cdn.mescius.io/umb/media/jedjgg33/cors-errors.png?rmode=max&width=665&height=108)

The [moesif CORS browser extension](https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en-US "https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en-US") can bypass these restrictions during local development, but [server-side solutions or CORS headers are needed for production readiness](https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9 "https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9").

</div>

We are now able to return the URL as a blob. We can see this by writing it to the browser console.

![Console](//cdn.mescius.io/umb/media/yrleizrb/browsers-console.png?rmode=max&width=734&height=367)

## <a id="Read"></a>Read the Excel File Blob and Import It to the JS Spreadsheet Instance

Now that we can fetch the Excel file’s data from its URL and return the file's data as a blob, our final step is to read the XLSX blob and import it to the JavaScript spreadsheet workbook instance. We can accomplish this using the SpreadJS [**import** method](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Workbook#import "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Workbook#import") within the fetch request.

```
    <script type="text/javascript">
      window.onload = function () {
        // Initialize the JavaScript spreadsheet instance
        var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

        // Fetch XLSX from URL and Return the File as a Blob
        document.getElementById('loadFromURL').addEventListener('click', function () {
            var url = document.getElementById("importURL").value;
            fetch(url)
              .then(res => res.blob()) // returns URL data a blob
               .then((blob) => {
                  // Import the Excel file blob to the JS workbook
                  workbook.import(blob);
               });
        })
      }
    </script>
```

Users can now import and edit Excel files in a web app from a URL. [Check out our other blog that covers how to add additional client-side importing and exporting capabilities](https://developer.mescius.com/blogs/how-to-import-export-excel-xlsx-using-javascript "https://developer.mescius.com/blogs/how-to-import-export-excel-xlsx-using-javascript").

![SJS Import from URL - CORS Showing](//cdn.mescius.io/umb/media/kadpvkh5/sjs-import-from-url-cors-showing.gif?rmode=max&width=760&height=380)

## JavaScript Spreadsheet Components

This article only scratches the surface of the full capabilities of [**SpreadJS**](https://developer.mescius.com/spreadjs),our JavaScript spreadsheet component. Review the [documentation](https://developer.mescius.com/spreadjs/docs/overview "https://developer.mescius.com/spreadjs/docs/overview") to see some of the many available features, and check out our [online demos](https://developer.mescius.com/spreadjs/demos/ "https://developer.mescius.com/spreadjs/demos/") to see the features in action and interact with the sample code. Integrating a spreadsheet component into your applications allows you to customize your users' experience and provide them with familiar spreadsheet functionality without referring them to an external program. To learn more about SpreadJS, check out this video:

{% embed https://youtu.be/jACaSv6JVAc %}