exportar HTML Excel JavaScript 1

¿Cómo exportar una tabla HTML a Excel con JavaScript?

➥ Ir al inicio del Curso de Excel online gratis

  • Si tienes un documento HTML con formato de tabla, podrás exportarlo a Excel con JavaScript
  • No se trata de un tutorial sencillo, que se pueda realizar sin aprender unos conceptos previos, pero tampoco es tan complicado como podía llegar a pensar un principiante. Es cuestión de seguir unos lineamientos

Aunque muchos usuarios no lo saben, es posible generar documentos de Office, más precisamente de Excel, con prácticamente cualquier elemento de partida. Por ejemplo, saber cómo exportar una tabla HTML a Excel con JavaScript te permitirá gestionar nuevos contenidos de hojas de cálculo como desees, sin límites.

Como decíamos, es perfectamente posible generar un documento de Excel, con su respectiva extensión XLSX, partiendo del contenido de una tabla HTML, algo que podías llegar a creer improbable, haciéndolo a mano.

En las siguientes líneas, vamos a enseñarte de qué manera proceder utilizando la librería TableExport, lo que te permitirá exportar desde la web una hoja de cálculo, reportes, tablas creadas por un framework, etc.

Exportar una tabla HTML a Excel con JavaScript paso a paso

Scripts a incluir

Antes de comenzar, tendrás que descargar un total de tres scripts, los siguientes:

  1. XLSXhttps://unpkg.com/xlsx@latest/dist/xlsx.full.min.js
  2. FileSaverhttps://unpkg.com/file-saverjs@latest/FileSaver.min.js
  3. TableExporthttps://unpkg.com/tableexport@latest/dist/js/tableexport.min.js

Acto seguido, tienes que ingresarlos en el head, de la siguiente forma:

<head>
    <!--
    En este orden
    -->
    <script src="./js/xlsx.full.min.js"></script>
    <script src="./js/FileSaver.min.js"></script>
    <script src="./js/tableexport.min.js"></script>
</head>

Diseño de la tabla a exportar

La tabla HTML que vamos a exportar a Excel

Si quieres un elemento TABLE como el anterior, el código debe quedar de la siguiente manera:

<table id="tabla">
    <thead>
        <tr>
            <th>Lenguaje</th>
            <th>Sitio web</th>
            <th>Algunos usos</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>PHP</td>
            <td>php.net</td>
            <td>Aplicaciones web</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>python.org</td>
            <td>Aplicaciones web y de escritorio. Machine learning</td>
        </tr>
        <tr>
            <td>Go</td>
            <td>golang.org</td>
            <td>Aplicaciones web y de escritorio</td>
        </tr>
    </tbody>
</table>

El id inicial, en este caso «tabla», es muy importante, y te servirá de cara al futuro. No lo olvides.

Exportar la tabla a HTML

Para exportar la tabla a HTML, lo primero será añadirle un botón que nos permita hacerlo, así:

<button id="btnExportar">Exportar</button>

Acto seguido, desde JavaScript tienes que hacer una recuperación utilizando querySelector y, aprovechando el movimiento, también vamos a hacer una recuperación de referencia a la tabla, por lo que quedará de este modo:

const $btnExportar = document.querySelector("#btnExportar"),
    $tabla = document.querySelector("#tabla");

$btnExportar.addEventListener("click", function() {
    // Aquí exportar la tabla
});

En este punto, el código definitivo de exportación debería como éste:

let tableExport = new TableExport($tabla, {
    exportButtons: false, // No queremos botones
    filename: "Mi tabla de Excel", //Nombre del archivo de Excel
    sheetname: "Mi tabla de Excel", //Título de la hoja
});
let datos = tableExport.getExportData();
let preferenciasDocumento = datos.tabla.xlsx;
tableExport.export2file(preferenciasDocumento.data, preferenciasDocumento.mimeType, preferenciasDocumento.filename, preferenciasDocumento.fileExtension, preferenciasDocumento.merges, preferenciasDocumento.RTL, preferenciasDocumento.sheetname);

Como puedes ver, está la opción de exportar, los elementos de personalización, los datos de exportación, etc.

El código HTML definitivo

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Exportar tabla HTML a Excel</title>
        <script src="./js/xlsx.full.min.js"></script>
        <script src="./js/FileSaver.min.js"></script>
        <script src="./js/tableexport.min.js"></script>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <h1>Tabla HTML a Excel</h1>
        <p>
            Exportar los datos de una tabla de una página web a una hoja de cálculo de Excel
            <br>
            <a href="//parzibyte.me/blog">By Parzibyte</a>
        </p>
        <button id="btnExportar">Exportar</button>
        <br>
        <br>
        <table id="tabla">
            <thead>
                <tr>
                    <th>Lenguaje</th>
                    <th>Sitio web</th>
                    <th>Algunos usos</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>PHP</td>
                    <td>php.net</td>
                    <td>Aplicaciones web</td>
                </tr>
                <tr>
                    <td>Python</td>
                    <td>python.org</td>
                    <td>Aplicaciones web y de escritorio. Machine learning</td>
                </tr>
                <tr>
                    <td>islaBit</td>
                    <td>islabit.com</td>
                    <td>¡Cursos y tutoriales de Excel gratis! ^^</td>
                </tr>
            </tbody>
        </table>
        <script src="./js/script.js"></script>
    </body>
</html>

El código JavaScript definitivo

const $btnExportar = document.querySelector("#btnExportar"),
    $tabla = document.querySelector("#tabla");

$btnExportar.addEventListener("click", function() {
    let tableExport = new TableExport($tabla, {
        exportButtons: false, // No queremos botones
        filename: "Mi tabla de Excel", //Nombre del archivo de Excel
        sheetname: "Mi tabla de Excel", //Título de la hoja
    });
    let datos = tableExport.getExportData();
    let preferenciasDocumento = datos.tabla.xlsx;
    tableExport.export2file(preferenciasDocumento.data, preferenciasDocumento.mimeType, preferenciasDocumento.filename, preferenciasDocumento.fileExtension, preferenciasDocumento.merges, preferenciasDocumento.RTL, preferenciasDocumento.sheetname);
});

Resultado final en formato Excel o XLSX

exportar HTML Excel JavaScript

Allí encima tienes el resultado final, ya en formato XLSX, lo que deja en claro el funcionamiento de este tutorial.


Deja un comentario