Convertir WYSIWYG a PDF con PHP y JavaScript

Editor WYSIWYG a PDF con PHP y JavaScript

En el post de hoy vas a aprender a generar un PDF a partir del contenido de un editor WYSIWYG. Pondremos el editor de contenido a disposición del usuario para que pueda agregar texto e imágenes, y una vez terminado, pueda generar un PDF a partir de lo que haya diseñado.

Editor WYSIWYG a PDF con PHP y JavaScript

Dicho con otras palabras, te mostraré cómo generar un PDF a partir del texto enriquecido introducido por el usuario. Para esto vamos a usar JavaScript, summernote y dompdf.

Configurando editor WYSIWYG

El usuario va a tener la posibilidad de diseñar el PDF. Para ello vamos a usar un editor WYSIWYG cuyo funcionamiento ya he explicado anteriormente en mi blog:

Te recomiendo leer el post completo, aunque de cualquier manera te voy a dejar el código completo para que todo funcione. El código del editor queda así:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WYSIWYG a PDF By Parzibyte</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
    <link href="./summernote-bs4.min.css" rel="stylesheet">
    <script src="./summernote-bs4.min.js"></script>
</head>

<body>
    <div id="summernote"></div>
    <button id="convertir" class="btn btn-success m-2">Crear PDF</button>
    <script>
        $(document).ready(function () {
            $('#summernote').summernote();
        });
    </script>
</body>

</html>

Lo que estamos haciendo es incluir las librerías para el editor WYSIWYG e iniciándolo. Fíjate que también hay un botón con el id convertir, se va a escuchar escuchar el clic de ese botón para enviar el HTML generado por el editor a PHP.

Enviar contenido del editor a PHP

$("#convertir").click(async () => {
    const html = $('#summernote').summernote('code');
    const response = await fetch("./convertir.php", {
        body: JSON.stringify({ html }),
        method: "POST",
    });
    const contenidoDelArchivo = await response.blob();
    const a = document.createElement("a");
    const url = URL.createObjectURL(contenidoDelArchivo);
    a.href = url;
    a.download = "documento.pdf";
    a.click();
    URL.revokeObjectURL(url);
});

Cuando el usuario haga clic en el botón “Crear PDF”, se va a obtener el HTML del editor y enviar a PHP. PHP debe responder con el contenido del PDF en formato BLOB, así que esperamos la respuesta y la decodificamos. En otras palabras estamos descargando el PDF.

Una vez que el PDF haya sido descargado en JavaScript, creamos un enlace para que el usuario pueda descargarlo en su computadora usando URL.createObjectURL.

Básicamente el proceso hará que el usuario diseñe un documento, lo guarde, PHP lo convierta a PDF y JavaScript lo descargue. Todo de manera casi instantánea.

Servidor con PHP y dompdf

Al igual que ya le dediqué un post completo al editor wysiwyg, también le he dedicado un post completo a dompdf para generar un pdf a partir de una cadena de HTML.

Te voy a dejar el código completo al final del post, pero te recomiendo leer el artículo completo para que sepas cómo instalar la librería (composer require dompdf/dompdf) e incluir el autoload.php:

En realidad el código PHP para generar el PDF a partir del contenido del editor WYSIWYG que viene desde JavaScript es muy corto, simplemente recibe el HTML de la carga útil y renderiza el PDF:

<?php
$payload = json_decode(file_get_contents("php://input"));
if (!$payload) {
    exit("No hay payload");
}
include_once "./vendor/autoload.php";

use Dompdf\Dompdf;

$html = $payload->html;
$dompdf = new Dompdf();
$dompdf->loadHtml($html);
$dompdf->render();
header("Content-type: application/pdf");
header("Content-Disposition: inline; filename=documento.pdf");
echo $dompdf->output();

Poniendo todo junto

Con el código que te mostré arriba debes ser capaz de usar un editor de contenido y generar un PDF con PHP. Te dejo el código completo a continuación, y no olvides instalar las dependencias con composer install.

https://github.com/parzibyte/wysiwyg-a-pdf

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

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/