Loading ...

Integrare Excel in un sito web con Javascript e jExel

Integrare Excel in un sito web con Javascript e jExel

jExcel è una libreria per Javascript che ci consente di integrare Excel (o più in senso lato uno Spreadsheet) dentro alle pagine web.

(Da non confondere con una omonima libreria per Java).

Qui sotto un esempio con alcune funzionalità; sul sito ufficiale potete vedere quante cose possiamo fare con questa libreria.

Comunque ecco un esempio di codice:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.3/jquery.csv.min.js"></script>
        <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.3.4/js/jquery.jexcel.js"></script>
        <link rel="stylesheet" 
              href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.3.4/css/jquery.jexcel.css"
              type="text/css">
    </head>
    <body>
        <div id="tbl"></div>
        <button id="to_csv">Convertire in CSV</button>
        <button id="to_json">Convertire in JSON</button>
        <script>
            data = [
                ['matteo', 'italia', 33],
                ['james', 'usa', 25],
                ['heinz', 'germania', 50],
            ];
            $('#tbl').jexcel({
                colHeaders: ['Nome', 'Paese', 'Età'],
                data: data,
                colWidths: [300, 80, 100]
            });
            
            $('#to_csv').on('click', function () {
                var data = $('#tbl').jexcel('getData');
                console.log($.csv.fromArrays(data));
            });

            $('#to_json').on('click', function () {
                var data = $('#tbl').jexcel('getData');
                console.log(JSON.stringify(data));
            });
        </script>
    </body>
</html>

Ho messo anche due tasti per l'esportazione in JSON e CSV.

I dati li ho scritti nel codice, ma ovviamente potete prenderli anche da fonti esterne.

Inoltre gli esempi ufficiali sono anche semplici da applicare.

Dategli un'occhiata, è molto interessante!

Enjoy!