Saltar al contenido

Tutorial de SheetJS – Crear archivo excel con Javascript

En este tutorial, vamos a hablar sobre SheetJs.聽Una biblioteca de Excel javascript que le permite hacer muchas cosas con Excel, como crear un libro de exportaci贸n desde cero, convertir una tabla html, una matriz o JSON en un archivo xlsx descargable.聽Y lo mejor es que todo se har谩 solo en el lado del navegador.聽Ning煤n script del lado del servidor o AJAX involucrado en absoluto!

Existen 2 versiones de SheetJS, una es la versi贸n comunitaria que es gratuita y la versi贸n Pro que tiene la funci贸n extendida.聽Obviamente, vamos a utilizar la versi贸n de comunidad para este tutorial.聽Solo descargue desde聽github聽y copie聽xlsx.full.min.js聽en su directorio web e聽incl煤yalo聽a su etiqueta de script

Creaci贸n de un libro de trabajo

Ahora comencemos con la creaci贸n de un nuevo libro de trabajo llamando a la funci贸n de utilidad book_new () que devolver谩 un objeto de libro vac铆o.

var wb = XLSX.utils.book_new();

Puede actualizar las propiedades del libro de trabajo como t铆tulo, tema, autor con wb.Props.

wb.Props = {
                Title: "SheetJS Tutorial",
                Subject: "Test",
                Author: "Red Stapler",
                CreatedDate: new Date(2017,12,19)
        };

Ahora que tenemos el libro de trabajo, el siguiente paso es crear una hoja de trabajo y agregarla al libro de trabajo.聽Primero, deber谩 asignar un nuevo nombre de hoja y insertarlo en la matriz SheetNames.

wb.SheetNames.push("Test Sheet");

Luego, para el contenido dentro de la hoja, tiene varias opciones.聽Ha creado una hoja desde una matriz de matriz, JSON o tabla html.聽Para este tutorial, voy a usar array of array.聽La estructura es bastante sencilla.聽Cada matriz representa los datos de la fila y los miembros son el contenido de la celda.

var ws_data = [['hello' , 'world']];  //a row with 2 columns

Ahora cree la hoja de esta matriz usando aoa_to_sheet ()

var ws = XLSX.utils.aoa_to_sheet(ws_data);

Y asigne el objeto de hoja a la matriz Hojas de libro de trabajo.

wb.Sheets["Test Sheet"] = ws;

Enhorabuena, ahora ha creado un libro de trabajo y una hoja de trabajo con la primera fila de datos.聽El siguiente paso es generar un archivo xlsx.

Exportando libro de trabajo para descargar

Necesitamos exportar el libro de trabajo como binario xlsx.聽Use la funci贸n de escritura y luego pase el聽bookType聽como聽xlsx聽y el聽tipo de聽salida聽como聽binario

var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});

Ahora tenemos nuestros datos binarios xlsx en wbout var.聽Sin embargo, el tipo de contenido correcto para el archivo de Excel es el flujo de octetos, por lo que deber谩 convertir los datos binarios en octetos.聽Podemos lograrlo mediante el uso de arrayBuffer, UInt8Array y operaciones de bits como esta.

function s2ab(s) { 
                var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
                var view = new Uint8Array(buf);  //create uint8array as viewer
                for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
                return buf;    
}

Vamos a utilizar Filesaver.js y Blob para manejar el guardado de archivos para la compatibilidad con varios navegadores.聽Use la funci贸n saveAs () y cree un nuevo objeto Blob a partir de una matriz de octetos.聽Establecer el tipo de contenido como聽octet-stream聽.聽siga por el nombre de archivo de Excel que le gustar铆a.

$("#button-a").click(function(){
       saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), 'test.xlsx');
});

Estamos listos;聽隆Vamos a probarlo!

Puedes verlo en acci贸n en el siguiente v铆deo.

As铆 que esa es la base de c贸mo crear un archivo Excel con javascript puro utilizando SheetJS.聽En el siguiente tutorial, le mostraremos c贸mo convertir una tabla HTML en un archivo de Excel en solo unos minutos con SheetJS.

C贸digo fuente

<html>
<head>
<script src="jquery-2.1.4.js"></script>
<script lang="javascript" src="xlsx.full.min.js"></script>
<script lang="javascript" src="FileSaver.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="navbar"><span>Red Stapler - SheetJS </span></div>
<div id="wrapper">
    
        <button id="button-a">Create Excel</button>
</div>
<script>
        var wb = XLSX.utils.book_new();
        wb.Props = {
                Title: "SheetJS Tutorial",
                Subject: "Test",
                Author: "Red Stapler",
                CreatedDate: new Date(2017,12,19)
        };
        
        wb.SheetNames.push("Test Sheet");
        var ws_data = [['hello' , 'world']];
        var ws = XLSX.utils.aoa_to_sheet(ws_data);
        wb.Sheets["Test Sheet"] = ws;
        var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});
        function s2ab(s) {
  
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
                
        }
        $("#button-a").click(function(){
                saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), 'test.xlsx');
        });
  
</script>
</body>
</html>
Comparte