| Quick Start Guide | |
|---|---|
| Tutorial Concept | Fetch and read Excel (.xlsx) files from a URL into a JavaScript spreadsheet application. |
| What You Will Need |
Visual Studio Code |
| Controls Referenced | |
SpreadJS, our JavaScript spreadsheet API, 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, 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 Excel XLSX Files from a URL in a JavaScript Application
- Create a JavaScript Spreadsheet Application
- Fetch XLSX from the URL and Return the File as a Blob
- Read the Excel File Blob and Import it to the JS Spreadsheet Instance
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!
Get the Latest Release Files by Downloading a Trial of SpreadJS Today!
The code below references the v17.1.6 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.1.6/SpreadJS/css/gc.spread.sheets.excel2013lightGray.17.1.6.css" />
<script src="SpreadJS.Release.17.1.6/SpreadJS/scripts/gc.spread.sheets.all.17.1.6.min.js" type="text/javascript"></script>
<script src="SpreadJS.Release.17.1.6/SpreadJS/scripts/plugins/gc.spread.sheets.io.17.1.6.min.js" type="text/javascript"></script>
<script src="SpreadJS.Release.17.1.6/SpreadJS/scripts/plugins/gc.spread.sheets.shapes.17.1.6.min.js" type="text/javascript"></script>
<script src="SpreadJS.Release.17.1.6/SpreadJS/scripts/plugins/gc.spread.sheets.charts.17.1.6.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>Next, create a script to initialize the JavaScript Workbook constructor and an HTML container to host it. Include an input field for specifying the Excel file URL and a button to invoke the import.
HTML:
<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>JavaScript:
<script>
window.onload = function () {
// Initialize SpreadJS Workbook
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
};
</script>The JavaScript spreadsheet UI component can now be seen in the browser.
License Information
No license key is required for local use of SpreadJS. For deployment, a Hostname License is needed. Refer to our documentation for more details or request a free 30-day trial key by contacting our Sales team: us.sales@mescius.com.
Fetch XLSX from the URL and Return the File as a Blob
Sets up an event listener for the button click and utilizes the Fetch API to establish a fetch request within the event, retrieving the Excel Workbook data from the provided link in blob format.
// 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)
// Returns URL data a blob
.then(res => res.blob())
});CORS Considerations
When accessing resources from external domains, you may encounter CORS issues such as "No 'Access-Control-Allow-Origin' header."
During development, the Moesif CORS browser extension can help bypass these restrictions, but for production environments, it's recommended to implement server-side CORS headers or other solutions to handle cross-origin requests securely.
Read the Excel File Blob and Import It to the JS Spreadsheet Instance
To complete the process, use the returned blob data to read the Excel file and import it into the JavaScript spreadsheet instance. This is done by calling the library’s import method within the fetch request.
// 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);
});
})
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.
Ready to Get Started? Download a Trial of SpreadJS Today!
JavaScript Spreadsheet Components
This article only scratches the surface of the full capabilities of SpreadJS, our JavaScript spreadsheet component. Review the documentation to see some of the many available features, and check out our online 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:
Tags:
Related Blogs
Try Our JavaScript Spreadsheet Components
SpreadJS Resources
