The Client-Side ExcelIO component is 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. Unlike the Server-Side ExcelIO component, the client-side component doesn’t require Windows Server. You can use this to import files from the user’s system, and to import Excel files hosted on the server using their URLs.

Here is a hosted sample verson of the project we'll create below: Spread HTML Page

SpreadJS Client-Side URL 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>Spread HTML Page</title>

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

</head>
</body>
</html>

Let’s add a reference to the jQuery library, too, for the click function.

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

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 Client-Side ExcelIO.

    <script>
        window.onload = function () {
            var excelIo = new GC.Spread.Excel.IO();
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"));
        }
    </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 malicious files.

<input id="importUrl" value="http://cdn.grapecity.com/samples/spreadjs/SpreadJS%20ClientSide%20URL%20Sample/Test.xlsx" />
<input id="btnExcelUpload" type="button" 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.

$("#btnExcelUpload").click(function () {
    var excelUrl = $("#importUrl").val(); // Excel file URL.

    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 Client-Side ExcelIO component.

Download SpreadJS Free Trial