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.
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.
$("#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.
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();
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
En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…
Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…
En un post previo te enseñé a enviar un mensaje en nombre de un Bot…
En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
Esta web usa cookies.