What You Will Need
- Visual Studio Code
- SpreadJS Release Files
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
Download the sample application and follow along with the blog.
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!
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.
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.
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:
Top comments (0)