The ExcelIO module of SpreadJS contains pure JavaScript logic for importing and exporting Excel files and is built right into SpreadJS. This is useful when you need to make your application platform-independent.

This module doesn’t require Windows Server and can run on a simple HTML page with JavaScript. You can use this to import files from the user’s system and import Excel files hosted on the server using their URLs.

Here is a hosted sample version of the project we'll create below: SpreadJS ExcelIO URL Page

Try SpreadJS's Spreadsheet Components

Download the latest version of SpreadJS

Download Now!

spread sample

Set Up the Project

Start by creating an HTML file and adding references to the Evaluation SJS files, specifically a CSS file, the main SJS library, and the ExcelIO library.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>SpreadJS ExcelIO URL</title>

    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.14.1.1.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.14.1.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.14.1.1.min.js"></script>
</head>
<body>
</body>
</html>

If you are deploying the page, you also need to add your license key.

<script>
    GC.Spread.Sheets.LicenseKey = "<Your Deployment Key>";
</script>

Add some code to initialize the component and the ExcelIO module.

<script>
    var workbook, excelIO;
    window.onload = function () {

        workbook = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"));
        excelIo = new GC.Spread.Excel.IO();

    }
</script>

To finish the set-up, add a DIV in the body of the page to host the SpreadJS component.

<body>
    <div id="spreadSheet" style="width: 860px; height: 498px; border: 1px solid gray"></div>
</body>

Add ExcelIO Code

The next step is to add two HTML input elements: one to specify the URL to import, and the other to import the file with a button click. For this sample, I’ve already uploaded the file to the same folder that hosts the HTML.

Note: If it’s not in the same folder, you’ll get a CORS exception. This is a security measure that prevents anyone from importing malici

Note: If it’s not in the same folder, you’ll get a CORS exception. This is a security measure that prevents anyone from importing malicious files.

<input id="importUrl" value="http://cdn.grapecity.com/spreadjs/hosted/samples/SpreadJSExcelIOURL/Test.xlsx" />
<input id="btnExcelUpload" type="button" onclick="loadFile()" value="Load Excel File" />

Now we add code to the button to load the Excel file from the URL. To do this, let’s use an XMLHttpRequest, combined with the ExcelIO logic for loading a file.

function loadFile() {
    var excelUrl = document.getElementById("importUrl").value;

    var oReq = new XMLHttpRequest();
    oReq.open('get', excelUrl, true);
    oReq.responseType = 'blob';
    oReq.onload = function () {
        var blob = oReq.response;
        excelIo.open(blob, function (json) {
            jsonData = json;
            workbook.fromJSON(json);
        }, function (message) {
            console.log(message);
        });
    };
    oReq.send(null);
}

And there you have it. That's all the code you need to import Excel files from a specified URL into SpreadJS using the ExcelIO module.

Try SpreadJS's Spreadsheet Components

Download the latest version of SpreadJS

Download Now!