En este post te mostraré cómo exportar una página web a PDF a través de un botón, enlace o cualquier cosa soportada por JavaScript. A este proceso también se le conoce como convertir HTML a PDF.

Convertir HTML a PDF con JavaScript

Es decir, convertir web a PDF usando programación con JavaScript y las siguientes librerías:

De hecho, html2pdf usa las dos librerías anteriores. Aunque parece complejo, verás que no lo es realmente. Con esta librería podemos crear un PDF muy parecido a la página web, incluyendo imágenes.

Incluyendo librería

Tenemos dos opciones. Incluir el “bundle” que ya tiene las otras dos dependencias, o cargar las 3 dependencias por separado. Recomiendo el bundle, mismo que podemos conseguir aquí.

Nota: tal vez con el paso del tiempo, se cambie la manera de incluir la librería. Aquí te dejo el repositorio del proyecto por si algo ha cambiado.

En mi caso la he descargado, e incluido así:

Generando PDF

Al incluir la librería tendremos a la función html2pdf. Aquí dejo el código y lo explico a continuación.

 

En la línea 1 declaramos el elemento del DOM que se tomará para crear el PDF. Si quieres que se le tome a todo el cuerpo, envía directamente a document.body. También puedes enviar un div, párrafo, etcétera (puedes usar querySelector).

Después establecemos las opciones con set. Por ejemplo, establecemos el nombre del PDF generado con JavaScript. También enviamos opciones propias de las librerías html2canvas y jsPDF.

Una cosa importante es scale dentro de html2canvas, que indica la escala. Entre mayor sea, se notará una mejor calidad, pero será un PDF más pesado o en ocasiones contendrá errores.

En el caso de jsPDF estamos indicando que el formato sea a3. Puede ser a4, a1, a2, etcétera. Si quieres una buena página para las medidas yo consulté papersizes.org

La orientación se define con orientation. Puede ser portrait que es de manera vertical, o landscape de manera horizontal.

Al invocar al método save se devuelve una promesa que se resolverá cuando el PDF sea descargado (Se le preguntará al usuario en dónde guardarlo, sugiriendo el nombre especificado en filename. Recuerda que como es una promesa podemos manejar el catch, then y finally.

Ejemplo de conversión HTML a PDF con JavaScript

Cabe mencionar que esto es compatible con la mayoría de navegadores actuales y decentes. Por favor, usuarios de Internet Explorer, ya es 2020, es hora de actualizar los navegadores.

Como sea, aquí dejo un ejemplo completo y funcional. Tenemos el código HTML. Recuerda que este código puede ser HTML puro, ser preprocesado por PHP u otro lenguaje, etcétera:

Se puede observar que estamos importando el script de la librería, y un script propio que hará el funcionamiento. Además, tenemos un botón que al ser presionado va a generar el documento PDF. Ahora en la parte de programación con JavaScript:

Puedes ver el código completo en este enlace. También puedes acceder a la demostración aquí. Finalmente, te dejo un vídeo en YouTube con la explicación adicional:


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 1,347 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

5 Comentarios

jorge ardila · marzo 12, 2021 a las 10:10 am

cordial saludo, muy buen aporte, cuando son pocas paginas me sale desfazado, grande, fuera de borde el contenido y cuando son muchas paginas no sale contenido. me ayuda por favor.

Gabriel · febrero 17, 2021 a las 4:04 am

Hola! muy bueno el tutorial, quería saber si hay alguna forma de subir ese archivo pdf al servidor directamente sin que se descargue localmente, si no que una vez se genere el pdf se guarde en el servidor

    parzibyte · febrero 17, 2021 a las 10:20 am

    Hola. Gracias por sus comentarios.
    Me parece que sí es posible
    Saludos!

Jose Morales · diciembre 27, 2020 a las 6:16 pm

Muchas gracias por tu publicación, me ayudó bastante con la generación de reportes despues de varios dolores de cabeza intentando usar html2canvas y jspdf directamente, los cuales trabajan pesimo con CSS.

De verdad muchisimas gracias, te ganaste el cielo

    parzibyte · diciembre 27, 2020 a las 7:02 pm

    Me agrada escuchar que mi post le haya ayudado. Le invito a suscribirse al blog y a seguirme en mis redes sociales
    Saludos 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: