| Quick Start Guide | |
|---|---|
| What You Will Need |
Visual Studio Code |
| Controls Referenced | |
| Tutorial Concept | Fetch and read Excel files from a URL into a JavaScript spreadsheet application. |
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.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.
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 for license information and request a free 30-day trial key from our sales team: us.sales@mescius.com.
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 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>Import Note
When developing web apps that fetch resources from external domains, you may encounter CORS errors like "No 'Access-Control-Allow-Origin' header."
The moesif CORS browser extension can bypass these restrictions during local development, but server-side solutions or CORS headers are needed for production readiness.
We are now able to return the URL as a blob. We can see this by writing it to the browser console.
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 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.
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
Mackenzie Albitz