Crear y exportar una tabla HTML a PDF

export imagen to pdf

Hola, en este tutorial vamos a continuar aprendiendo a exportar documentos html a pdf. Esta vez estaremos aprendiendo como crear y exportar una tabla HTML a PDF.

Crear y exportar una tabla HTML a PDF

Crear la tabla HTML

Lo primero es crear nuestro código HTML para presentar la tabla de ejemplo que vamos a exportar.

<section>
        <div>
            <h1>EXPORT TABLE TO PDF</h1>
        </div>
        <div id="maintable">
            <h1>Mi Tabla</h1>
            <table class="mitabla" cellspacing="0">                
                <thead>                    
                    <tr>
                        <th>id</th>
                        <th>Mes</th>
                        <th>Gastos</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Enero</td>
                        <td>$150</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Febrero</td>
                        <td>$250</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>Total</td>
                        <td>2</td>
                        <td>$400</td>
                    </tr>
                </tfoot>
            </table>
        </div>    
        <div>
            <button id="pdfout">Create PDF</button>
        </div>
    </section>
table html sin estilo

Si agregamos el estilo para mejorar la tabla veríamos lo siguiente:

tabla html con estilo de ejemplo

Este es el código:

<style>
        section{text-align: center;}
        #maintable{width: 80%; text-align: center;margin: auto 10%;}
        .mitabla{width: 100%; padding:20px;}
        .mitabla thead{background-color: gray;}
        .mitabla tfoot{background-color: antiquewhite;}
    </style>

Exportar HTML a PDF

Para exportar a pdf, vamos a utilizar JavaScript, y lo primero que haremos sera, incluir las librerías que vamos a necesitar para exportar a pdf. Las librerías son, la librería jsPDF y la de html2canvas.

<!--    Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.js" integrity="sha512-sk0cNQsixYVuaLJRG0a/KRJo9KBkwTDqr+/V94YrifZ6qi8+OO3iJEoHi0LvcTVv1HaBbbIvpx+MCjOuLVnwKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

A continuación, comenzamos a crear nuestro código para exportar a pdf.

Lo primero sera declarar las variable y llamar a los elementos html:

 <script>
var maintable = document.getElementById('maintable'),
            pdfout = document.getElementById('pdfout');
....
 </script>

Luego llamaremos a pdfout, el cual es el botón que permitirá exportar la tabla a pdf. El código esta comentado para mejor explicación.

pdfout.onclick = function(){
            var doc = new jsPDF('p', 'pt', 'letter'); /*declara una nueva instancia de jspdf*/
            var margin = 20; /*margen de la pagina*/
            var scale = (doc.internal.pageSize.width - margin * 2) / document.body.clientWidth; /*ancho de la pagina para escritorio*/
            var scale_mobile = (doc.internal.pageSize.width - margin * 2) / document.body.getBoundingClientRect(); /*ancho de pagina en dispositivos moviles*/

            /*cheaqueando si el dispositivo es un movil o es una PC*/
            if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
                /*Si el dispositivo es un telefono movil*/
                doc.html(maintable, { /*llamamos al contenido encapsulado en un ID (maintable) para poder exportar todo el contenido que posee ene l interior*/
                    x: margin,
                    y: margin,
                    html2canvas:{
                        scale: scale_mobile,
                    },
                    callback: function(doc){
                        doc.output('dataurlnewwindow', {filename: 'pdf.pdf'}); /*crear el pdf y abrir una nueva ventana en el navegador*/
                    }
                });
            } else{
                /*Si es dispositivo es una PC o escritorio*/ 
                doc.html(maintable, {
                    x: margin,
                    y: margin,
                    html2canvas:{
                        scale: scale,
                    },
                    callback: function(doc){
                        doc.output('dataurlnewwindow', {filename: 'pdf.pdf'}); /*crear el pdf y abrir una nueva ventana en el navegador*/
                    }
                });
            }
        };

Y con esto, ya tenemos el código de ejemplo terminado. Solo deben ejecutar la pagina y podrán ver la pagina pdf crearse. Espero le sea útil este pequeño tutorial y nos vemos en el próximo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.