SpreadJS, our JavaScript spreadsheet API, supports importing and exporting complex Excel (.XLSX) files with the SpreadJS Excel IO module. The Excel IO module contains pure JavaScript logic for importing and exporting built right into it with no dependencies on Excel. This is very useful when you need to make your application platform independent.
The Excel IO module can be run on any HTML page using JavaScript, making it easy to integrate SpreadJS into your JavaScript application. We currently have a live demo that shows how to import Excel files from a user’s system, but SpreadJS also supports importing Excel files from a specified URL. In this blog, we will see how to utilize the SpreadJS API for the Excel IO element to import and read Excel files from a specified URL.
To Read an Excel XLSX File from a URL in a JavaScript Application:
-
Fetch an Excel File Using its URL and Return the File as a Blob
-
Read the Excel File’s Blob and Import it to the SpreadJS Spreadsheet
Step 1: Create a JavaScript Project with SpreadJS Spreadsheet
First, start by creating a simple HTML file.
index.html
<!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" />
</head>
<body>
</body>
</html>Include the needed SpreadJS release files in the project. The files can be included in the head tag of the HTML file.
|
Main SpreadJS library |
|
|---|---|
|
SpreadJS Plug-ins |
|
|
Excel IO library |
|
|
SpreadJS CSS - Sets the SpreadJS Theme |
|
Get the Latest Release Files by Downloading a Trial of SpreadJS Today!
index.html
<!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" />
<link rel="stylesheet" type="text/css" href="...gc.spread.sheets.excel2013white.css"/>
<script src="...gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="...gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>SpreadJS is Available on NPM
Developers can also install SpreadJS using NPM, here are links to the NPM pages:
|
Main SpreadJS library |
|
|---|---|
|
SpreadJS Plug-ins |
|
|
Excel IO library |
With SpreadJS now included in the JavaScript project, we must initialize the Workbook and the Excel IO module. For this demo, we created a JavaScript file and added a Window Onload function to do this.
apps.js
window.onload = function () {
// Initialize SpreadJS and ExcelIO
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var excelIo = new GC.Spread.Excel.IO();
}Lastly, add a DIV element to host SpreadJS on the webpage.
index.html
<!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" />
<link rel="stylesheet" type="text/css" href="...gc.spread.sheets.excel2013white.css"/>
<script src="...gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="...gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<!-- Workbook host element -->
<div id="ss" style="width:75%;height:75%"></div>
</body>
</html>Outcome: SpreadJS, the JavaScript spreadsheet control, is now observed in the browser.
License Information
SpreadJS works locally with no license key, but a license is required when deploying the web page. Check out the documentation for license information and request a free 30-day trial key from our sales team: us.sales@grapecity.com.
Step 2: Fetch an Excel File Using its URL and Return the File as a Blob
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: https://cdn.grapecity.com/support/spread/Kevin%20Ashley/export.xlsx
-
Input button type used to import the file from the URL on click
index.html
<body>
<!-- Workbook host element -->
<div id="ss" style="width:75%;height:75%"></div>
<p>Import URL</p>
<input id="importURL"value="https://cdn.grapecity.com/support/spread/Kevin%20Ashley/export.xlsx"/>
<button id="loadFromURL">Import Excel from URL</button>
</body>Add a click event listener to capture clicks on button and read the URL from the input. Within the event, using the Fetch API, set up a fetch request and return the linked Excel Workbooks data as a blob.
app.js
window.onload = function () {
// Initialize SpreadJS and ExcelIO
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var excelIo = new GC.Spread.Excel.IO();
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);
});
})
};Outcome: We are now returning the URL as a blob; the blob can currently be seen in the console.
Step 3: Read the Excel File’s Blob and Import to the SpreadJS Spreadsheet
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 and import the blob to the SpreadJS instance. To accomplish use the Excel IO’s open method and the SpreadJS’s fromJSON method within the fetch request.
app.js
window.onload = function () {
// Initialize SpreadJS and ExcelIO
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var excelIo = new GC.Spread.Excel.IO();
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);
excelIo.open(blob, (json) => {
spread.fromJSON(json);
},
(message) => {
console.log(message);
});
});
})
};Outcome: Users can now view and edit Excel files in a web app from a URL. We have a separate blog that goes over how to add exporting capabilities.
You can download SpreadJS today and feel free to request a free 30-day trial evaluation key from our sales team: us.sales@grapecity.com.
GrapeCity Spreadsheet Components
This article only scratches the surface of the full capabilities of the GrapeCity SpreadJS 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 and the new features added with the v16 release check out our release blog and this video:
Tags:
Related Blogs
Try Our JavaScript Spreadsheet Components
SpreadJS Resources
Mackenzie Albitz