WhatsApp

  
Generar PDF a partir de un Canvas en JavaScript

Generar PDF a partir de un Canvas en JavaScript 

En este tutorial, aprenderemos cómo crear un archivo PDF a partir de un lienzo (canvas) en una página web utilizando JavaScript. Esta técnica es útil cuando deseas permitir a los usuarios descargar el contenido de un lienzo como un documento PDF. Vamos a seguir los pasos necesarios para lograr esto.

Requisitos:

  • Conocimientos básicos de HTML, CSS y JavaScript.
  • La biblioteca html2canvas para capturar el contenido del lienzo.
  • La biblioteca jsPDF para generar el archivo PDF.

Paso 1: Configuración del Proyecto

Antes de comenzar, asegúrate de tener las bibliotecas html2canvas y jsPDF incluidas en tu proyecto. Puedes obtenerlas desde html2canvas y jsPDF.

Paso 2: Creación del Lienzo y Contenido

En tu archivo HTML, crea un div que contenga el contenido que deseas convertir en PDF. Este div puede incluir imágenes, texto, gráficos o cualquier otro elemento que desees.


<div id="divsContenedorGeneral">
<!-- Agrega tu contenido aquí -->
</div>

Paso 3: Captura del Contenido del Lienzo

Utilizaremos la biblioteca html2canvas para capturar el contenido del div y colocarlo en un lienzo HTML. Asegúrate de que tengas un botón en tu página que permita a los usuarios iniciar este proceso.

<button id="imprimirReporteGeneral">Generar PDF</button>

Paso 4: Escala y Divide el Contenido

Después de capturar el contenido en el lienzo, necesitas dividirlo en páginas si es demasiado grande para caber en una sola página. Esto se hace escalando el lienzo y creando páginas PDF.

Paso 5: Generación del PDF

Finalmente, utilizaremos la biblioteca jsPDF para crear el archivo PDF a partir del contenido del lienzo y guardarlo en el disco del usuario.

function capturarPantalla() {    
    var canvas = document.getElementById("miCanvasCaptura");
    var divContenedor = document.getElementById("divsContenedorGeneral");
if (canvas &amp;&amp; divContenedor) {
// Ajusta el tamaño del lienzo al tamaño del div
        canvas.width = divContenedor.offsetWidth;
        canvas.height = divContenedor.offsetHeight;
// Captura el contenido del div directamente en el lienzo
        html2canvas(divContenedor, {
            canvas: canvas,
            scale: 1 }).then(function () {
            // Calcula la cantidad de páginas necesarias
            var pageHeight = 297; // A4 tamaño en milímetros (210 x 297 mm)
            var canvasHeight = canvas.height * 0.20;
            var numPages = Math.ceil(canvasHeight / pageHeight);
// Una vez capturado el contenido en el lienzo, crea el PDF con páginas divididas
            var pdf = new jsPDF('p', 'mm', 'a4');
            var lastPageHadContent = true; // Inicialmente asume que la última página tiene contenido
for (var i = 0; i &lt; numPages; i++) {
                if (!lastPageHadContent) {
                break; // No agregues más páginas si la última estaba en blanco }
if (i &gt; 0) {
                    pdf.addPage(); }
    var offsetY = i * pageHeight;
                    var endY = offsetY + pageHeight;
                    if (endY &gt; canvasHeight) {
                        endY = canvasHeight;
                    }
    // Captura y agrega la parte del lienzo a la página del PDF sin escalar
                    pdf.addImage(canvas.toDataURL("image/jpeg"), 'JPEG', 0, -offsetY, 210, 1400);
    // Verifica si la última página tiene contenido
                    lastPageHadContent = offsetY + pageHeight &lt; canvasHeight;
                }
    // Guarda el PDF en el disco
                pdf.save("canvas.pdf");
            });
    }
}

Paso 6: Evento Click y Descarga del PDF

Agrega un oyente de eventos al botón "Generar PDF" para que llame a la función capturarPantalla cuando se haga clic. El PDF generado se guardará con el nombre "canvas.pdf" y se descargará automáticamente.

document.addEventListener("DOMContentLoaded", function () {
var capturarBoton = document.getElementById("imprimirReporteGeneral");

if (capturarBoton) {
capturarBoton.addEventListener("click", capturarPantalla);
}
});

Conclusión:

En este tutorial, hemos aprendido cómo generar un archivo PDF a partir de un lienzo en una página web utilizando JavaScript. Esto puede ser útil en una variedad de casos, como generar informes, tarjetas de visita digitales o cualquier otro contenido personalizado que los usuarios deseen descargar en formato PDF. ¡Esperamos que este tutorial te haya sido útil!

Ahora puedes personalizar este esqueleto para crear un blog completo con explicaciones detalladas, ejemplos de código y capturas de pantalla. Asegúrate de incluir enlaces a las bibliotecas html2canvas y jsPDF para que los lectores puedan acceder a ellas fácilmente. ¡Buena suerte con tu blog!


Compartir


Generar PDF a partir de un Canvas en JavaScript
Mario Molina 11 octubre, 2023
Compartir
Categorías


Iniciar sesión dejar un comentario

  
Dominando las Peticiones HTTP en JavaScript: Guía Completa para Desarrolladores