Crear y exportar una tabla HTML a 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. Las librerías que vamos a utilizar van a ser las mismas que hemos usado antes. Pero en caso de que no hayas visto lo tutoriales anteriores sobre pdf, y este sea tu primer tutorial, vamos a estar usando las librerías jsPdf y html2Canvas.

Crear y exportar una tabla HTML a PDF

Crear la tabla

Lo primero es crear nuestro código HTML para presentar la tabla de ejemplo que vamos a exportar. Nuestra tabla va a ser sencilla con el propósito de aprendizaje. La tabla que generaremos sera una simple tabla sobre gastos mensuales. Vamos a elaborarla con solo dos meses (Enero y Febrero), los gastos de cada mes de forma general y al final vamos a presentar el total de gasto de ambos meses.

<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>

Este es el código para el estilo:

<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>

Ya con el estilo agregado para mejorar la tabla, el resultado que veríamos seria el siguiente:

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, para exportar a pdf usaremos la librería jsPDF junto a la de html2canvas.

<!--    Scripts jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<!--    Scripts html2canvas-->
<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'); 
            var margin = 20; 
            var scale = (doc.internal.pageSize.width - margin * 2) / document.body.clientWidth; 
            var scale_mobile = (doc.internal.pageSize.width - margin * 2) / document.body.getBoundingClientRect(); 

            
            if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
                
                doc.html(maintable, { 
                    x: margin,
                    y: margin,
                    html2canvas:{
                        scale: scale_mobile,
                    },
                    callback: function(doc){
                        doc.output('dataurlnewwindow', {filename: 'pdf.pdf'}); 
                    }
                });
            } else{
                 
                doc.html(maintable, {
                    x: margin,
                    y: margin,
                    html2canvas:{
                        scale: scale,
                    },
                    callback: function(doc){
                        doc.output('dataurlnewwindow', {filename: 'pdf.pdf'}); 
                    }
                });
            }
        };

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.

The Digital Mike