Crear un PDF desde un Canvas HTML con PDF-lib y HTML2Canvas

En el mundo digital actual, la necesidad de compartir información en formato PDF es una parte esencial de muchas aplicaciones y sitios web. Si alguna vez te has preguntado cómo puedes convertir contenido generado en un canvas HTML en un documento PDF, estás en el lugar correcto. En este artículo, aprenderemos a hacer precisamente eso utilizando dos bibliotecas populares: PDF-lib y HTML2Canvas.

Paso 1: Configuración del Entorno

Antes de comenzar, asegúrate de tener las bibliotecas necesarias disponibles en tu proyecto. Necesitarás las siguientes:

PDF-lib: Una potente biblioteca JavaScript para trabajar con archivos PDF.
HTML2Canvas: Una biblioteca que permite capturar el contenido de un elemento HTML, como un canvas, como una imagen.

Paso 2: Crear un Canvas HTML

Primero, necesitamos un canvas HTML en el que dibujaremos nuestro contenido. Aquí hay un ejemplo de cómo crearlo:

<canvas id=«miCanvas» width=«400» height=«300»></canvas>

Paso 3: Agregar Contenido al Canvas

En este paso, podemos agregar contenido al canvas. En nuestro ejemplo, hemos agregado un rectángulo azul y un círculo rojo. Este paso es crucial, ya que el contenido que añadimos al canvas se convertirá en parte de nuestro documento PDF.

Paso 4: Generar el PDF

Ahora viene la parte emocionante. Utilizaremos HTML2Canvas para capturar el contenido de nuestro canvas y luego PDF-lib para crear un PDF a partir de esa captura.

async function generarPDF() {
    const canvas = document.getElementById(‘miCanvas’);
    const ctx = canvas.getContext(‘2d’);

    // Agregar un rectángulo
    ctx.fillStyle = ‘blue’;
    ctx.fillRect(50, 50, 100, 50);

    // Agregar un círculo
    ctx.fillStyle = ‘red’;
    ctx.beginPath();
    ctx.arc(200, 100, 30, 0, 2 * Math.PI);
    ctx.fill();

    // Capturar el contenido del canvas como una imagen
    const canvasImage = await html2canvas(canvas);

    // Crear un nuevo documento PDF
    const pdfDoc = await PDFLib.PDFDocument.create();
    const page = pdfDoc.addPage([canvas.width, canvas.height]);

    // Dibujar la imagen del canvas en la página PDF
    const imageBytes = canvasImage.toDataURL(‘image/png’);
    const pngImage = await pdfDoc.embedPng(imageBytes);
    const { width, height } = pngImage.scale(1);
    page.drawImage(pngImage, {
        x: 0,
        y: 0,
        width,
        height,
    });

    // Convertir el PDF en un blob para mostrarlo en el navegador
    const pdfBytes = await pdfDoc.save();
    const blob = new Blob([pdfBytes], { type: ‘application/pdf’ });
    const pdfUrl = URL.createObjectURL(blob);

    // Crear un enlace para descargar el PDF
    const a = document.createElement(‘a’);
    a.href = pdfUrl;
    a.download = ‘mi_documento.pdf’;
    a.textContent = ‘Descargar PDF’;
    document.body.appendChild(a);
}

Paso 5: Descargar el PDF

Una vez que hayas ejecutado la función generarPDF, tendrás un PDF listo para descargar. Puedes proporcionar un enlace de descarga en tu sitio web para que los usuarios puedan obtener el PDF generado.

Código completo

<!DOCTYPE html>
<html lang=«es»>
<head>
    <meta charset=«UTF-8»>
    <title>Crear PDF desde Canvas</title>
    <script src=«https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.8.0/pdf-lib.js»></script>
    <script src=«https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js»></script>
</head>
<body>
    <canvas id=«miCanvas» width=«400» height=«300»></canvas>
    <button id=«generarPDF»>Generar PDF</button>

    <script>
        async function generarPDF() {
            const canvas = document.getElementById(‘miCanvas’);
            const ctx = canvas.getContext(‘2d’);

            // Agregar un rectángulo
            ctx.fillStyle = ‘blue’;
            ctx.fillRect(50, 50, 100, 50);

            // Agregar un círculo
            ctx.fillStyle = ‘red’;
            ctx.beginPath();
            ctx.arc(200, 100, 30, 0, 2 * Math.PI);
            ctx.fill();

            // Capturar el contenido del canvas como una imagen
            const canvasImage = await html2canvas(canvas);

            // Crear un nuevo documento PDF
            const pdfDoc = await PDFLib.PDFDocument.create();
            const page = pdfDoc.addPage([canvas.width, canvas.height]);

            // Dibujar la imagen del canvas en la página PDF
            const imageBytes = canvasImage.toDataURL(‘image/png’);
            const pngImage = await pdfDoc.embedPng(imageBytes);
            const { width, height } = pngImage.scale(1);
            page.drawImage(pngImage, {
                x: 0,
                y: 0,
                width,
                height,
            });

            // Convertir el PDF en un blob para mostrarlo en el navegador
            const pdfBytes = await pdfDoc.save();
            const blob = new Blob([pdfBytes], { type: ‘application/pdf’ });
            const pdfUrl = URL.createObjectURL(blob);

            // Crear un enlace para descargar el PDF
            const a = document.createElement(‘a’);
            a.href = pdfUrl;
            a.download = ‘mi_documento.pdf’;
            a.textContent = ‘Descargar PDF’;
            document.body.appendChild(a);
        }

        const generarPDFButton = document.getElementById(‘generarPDF’);
        generarPDFButton.addEventListener(‘click’, generarPDF);
    </script>
</body>
</html>

Conclusión

Crear un PDF a partir de un canvas HTML es una tarea que puede ser útil en una variedad de aplicaciones, desde la generación de informes hasta la creación de contenido descargable. Con las bibliotecas PDF-lib y HTML2Canvas, este proceso se vuelve mucho más accesible y sencillo.

Aprovecha estas herramientas para mejorar la experiencia de tus usuarios y brindarles contenido en un formato ampliamente aceptado como el PDF. ¡Esperamos que este artículo te haya ayudado a comprender cómo realizar esta tarea de manera efectiva en tu proyecto web!