Other resources

  • jExcel CE
    Jexcel community edition
  • jTools
    Web components, utilities and plugins
  • Importing data to your javascript spreadsheet

    From a CSV file

    The example below helps you to create a javascript spreadsheet table based on a remote CSV file, including the headers. The examples also requires a third party jquery CSV parser plugin (100% IETF RFC 4180).

    Source code

    <html>
    <script src="https://jexcel.net/v3/jexcel.js"></script>
    <script src="https://jexcel.net/v3/japp.js"></script>
    <link rel="stylesheet" href="https://jexcel.net/v3/jexcel.css" type="text/css" />
    <link rel="stylesheet" href="https://jexcel.net/v3/japp.css" type="text/css" />
    
    <div id="spreadsheet1"></div>
    
    <p><button id='download'>Export my spreadsheet as CSV</button></p>
    
    <script>
    mySpreadsheet = jexcel(document.getElementById('spreadsheet1'), {
        csv:'https://jexcel.net/v3/demo.csv',
        csvHeaders:true,
        columns: [
            { type:'text', width:70 },
            { type:'text', width:200 },
            { type:'text', width:300 },
         ]
    });
    
    document.getElementById('download').onclick = function () {
        mySpreadsheet.download();
    }
    </script>
    </html>
    

    Creating a javascript spreadsheet based on an external JSON file

    In a similar way, you can create a table based on an external JSON file format by using the url: directive as below.

    Source code

    <html>
    <script src="https://jexcel.net/v3/jexcel.js"></script>
    <script src="https://jexcel.net/v3/japp.js"></script>
    <link rel="stylesheet" href="https://jexcel.net/v3/jexcel.css" type="text/css" />
    <link rel="stylesheet" href="https://jexcel.net/v3/japp.css" type="text/css" />
    
    <div id="spreadsheet2"></div>
    
    <script>
    jexcel(document.getElementById('spreadsheet2'), {
        jexcel(document.getElementById('spreadsheet2'), {
            url:'/v3/test.json',
            columns: [
                { type:'text', width:300 },
                { type:'text', width:100 },
             ]
        });
    });
    </script>
    </html>
    

    Importing from a XSLX file

    The following example imports the data from a XSLX file using a thirdy party library, slighly customized in order to improve the CSS parser.

    IMPORTANT: This is an experimental implementation and there is no garantee your spreadsheet will be correctly parsed.


    Source code

    <html>
    <script src="https://jexcel.net/v3/jexcel.js"></script>
    <script src="https://jexcel.net/v3/japp.js"></script>
    <link rel="stylesheet" href="https://jexcel.net/v3/jexcel.css" type="text/css" />
    <link rel="stylesheet" href="https://jexcel.net/v3/japp.css" type="text/css" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
    <script src="https://jexcel.net/v3/xlsx.js"></script>
    
    <div id="spreadsheet3"></div>
    
    <script>
    jexcel.fromSpreadsheet('/v3/list.xlsx', function(result) {
        if (! result.length) {
            console.error('JEXCEL: Something went wrong.');
        } else {
            if (result.length == 1) {
                jexcel(document.getElementById('spreadsheet3'), result[0]);
            } else {
                jexcel.createTabs(document.getElementById('spreadsheet3'), result);
            }
        }
    });
    </script>
    </html>
    

    NOTE: This example is based on a customized version of the free version of Sheetjs. There is no garantee in the use of this library. Please consider purchase their professional version.