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