import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Crear un PDF a partir de una cadena HTML const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Exportar el PDF a un archivo await pdf.saveAs("output.pdf"); // Ejemplo avanzado con recursos HTML // Cargar activos HTML externos: Imágenes, CSS y JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Guardar el PDF con los activos cargados await advancedPdf.saveAs("html-with-assets.pdf"); })();

HERRAMIENTAS PDF

Cómo crear archivos PDF en JavaScript

Actualizado 13 de junio, 2023

Introducción

En el ámbito del intercambio de documentos, el formato de documento portátil (PDF)de Adobe, desempeña un papel crucial en la preservación de la integridad de los contenidos ricos en texto y visualmente atractivos. Para acceder a un archivo PDF en línea suele ser necesario un programa específico. En el panorama digital actual, los archivos PDF se han vuelto indispensables para diversas publicaciones importantes. Muchas empresas confían en los archivos PDF para crear documentos y facturas profesionales. Además, los desarrolladores suelen aprovechar las bibliotecas de creación de PDF para satisfacer requisitos específicos de los clientes. El proceso de generación de PDF se ha agilizado con la llegada de las bibliotecas modernas. A la hora de seleccionar la biblioteca más adecuada para un proyecto que implique la generación de PDF, es esencial tener en cuenta factores como las capacidades de compilación, lectura y conversión, garantizando una integración perfecta y un rendimiento óptimo.

Bibliotecas JavaScript

Consideremos, por ejemplo, el caso en el que queremos que el cliente pueda descargar e imprimir una copia de nuestra factura en PDF sin esfuerzo. Además, es crucial para nosotros mantener el diseño preciso de la factura y garantizar una calidad de impresión impecable.

En esta sección, profundizaremos en una serie de bibliotecas JavaScript de gran prestigio que destacan en la conversión y creación de documentos HTML a PDF, proporcionándonos herramientas versátiles para una generación y conversión de documentos eficiente y precisa.

1. PDFKit

PDFKit era una biblioteca PDF que fue una de las primeras en lanzarse al vasto ecosistema de bibliotecas JavaScript. Su popularidad ha crecido significativamente desde su lanzamiento inicial en 2012 y, a partir de 2021, sigue recibiendo actualizaciones periódicas.

Gracias a Webpack, PDFKit es compatible tanto con la biblioteca Node como con los navegadores web, y admite fuentes personalizadas e incrustación de imágenes.

Sin embargo, como veremos en la comparación, algunas bibliotecas PDF son en realidad envoltorios de PDFKit y quizás un poco más fáciles de usar que PDFKit.

No hay ninguna API de alto nivel disponible para PDFKit. La documentación también suele ser difícil. Como es de esperar, hay que acostumbrarse y es posible que la producción de archivos PDF con JavaScript no sea siempre la tarea más fácil.

//  incluido el módulo del sistema de archivos
const fs  = require('fs');

//  crear un documento de la misma manera que arriba
const Page = new PDFDocument;

//  añada aquí su contenido al documento, como de costumbre
Page.text('Hello world!');

//  obtén un blob cuando termines
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

//  incluido el módulo del sistema de archivos
const fs  = require('fs');

//  crear un documento de la misma manera que arriba
const Page = new PDFDocument;

//  añada aquí su contenido al documento, como de costumbre
Page.text('Hello world!');

//  obtén un blob cuando termines
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

JAVASCRIPT

2. pdfmake

A diferencia de PDFKit, que utiliza el método imperativo convencional para generar algo, pdfmake utiliza un enfoque declarativo. Como resultado, el uso de la biblioteca pdfmake hace que sea más fácil concentrarse en la funcionalidad prevista de la producción de PDF en lugar de perder el tiempo enseñando a la biblioteca cómo lograr un determinado resultado.

Es fundamental tener en cuenta que, aunque algunas soluciones puedan parecer prometedoras, es posible que no sean perfectas. Un ejemplo de ello es la integración de fuentes personalizadas con pdfmake cuando se utiliza Webpack, que puede dar lugar a problemas. Lamentablemente, la documentación disponible en línea sobre este problema específico es limitada. Sin embargo, si no utiliza Webpack, puede clonar fácilmente el repositorio Git y ejecutar el script de incrustación de fuentes para superar cualquier posible obstáculo asociado a la integración de fuentes personalizadas.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            function CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <button onclick="CreatePdf()">Print pdf</button>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            function CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <button onclick="CreatePdf()">Print pdf</button>
    </body>
</html>

HTML

Cómo crear archivos PDF en JavaScript: Figura 1

3. IronPDF

IronPDF se creó para facilitar a los desarrolladores la creación, exploración y edición de documentos PDF. Funciona como un potente conversor de PDF y ofrece una API base para crear, editar y procesar archivos PDF.

IronPDF for Node.js simplifica el proceso de creación y personalización de documentos PDF mediante programación. Desarrollado por Iron Software, proveedor de confianza de bibliotecas de procesamiento de documentos de alto rendimiento, IronPDF ofrece una solución robusta para la generación de PDF en entornos Node.js. Se integra a la perfección con proyectos Node.js, proporcionando a los desarrolladores potentes herramientas para generar, formatear y editar PDF con facilidad.

La biblioteca IronPDF tiene una amplia gama de funciones, como la posibilidad de dividir y combinar páginas en documentos PDF nuevos o existentes, leer y editar archivos PDF existentes, extraer imágenes de archivos PDF, añadir texto, gráficos, marcas de libro, marcas de agua, encabezados y pies de página a archivos PDF, todo ello sin necesidad de Acrobat Reader. A partir de archivos CSS y CSS media se pueden producir documentos PDF. IronPDF permite a los usuarios crear, cargar y actualizar formularios PDF nuevos y preexistentes.

Características principales de IronPDF for Node.js:

Generación versátil de PDF: Con IronPDF, los desarrolladores pueden generar PDF a partir de diversas fuentes, como HTML, CSS, JavaScript, imágenes y otros tipos de archivos. Esta flexibilidad permite crear documentos PDF dinámicos y visualmente atractivos adaptados a requisitos específicos.
Personalización avanzada de documentos: IronPDF permite a los desarrolladores mejorar los documentos PDF con funciones como encabezados, pies de página, archivos adjuntos, firmas digitales, marcas de agua y marcadores. Esto permite crear PDF de calidad profesional con contenido enriquecido y elementos interactivos.
Funciones de seguridad: IronPDF ofrece sólidas funciones de seguridad para proteger los PDF de accesos no autorizados. Los desarrolladores pueden implementar medidas de seguridad como contraseñas, firmas digitales, metadatos y otras configuraciones de seguridad para salvaguardar la información confidencial contenida en los documentos PDF.
Rendimiento optimizado: IronPDF está diseñado para un rendimiento óptimo, con soporte completo multihilo y asíncrono. Esto garantiza una generación eficiente de PDF, lo que la hace adecuada para aplicaciones de misión crítica en las que el rendimiento es primordial.
Completo conjunto de funciones: Con más de 50 funciones para crear, dar formato y editar documentos PDF, IronPDF ofrece una solución completa para todas las tareas relacionadas con PDF. Desde la generación básica de documentos hasta la personalización y seguridad avanzadas, IronPDF ofrece una amplia gama de funciones para satisfacer las necesidades de los desarrolladores.
El siguiente código muestra cómo Código JavaScript incrustado en HTML puede convertirse en un archivo PDF perfecto:

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
   //  Defina el código JavaScript para cambiar el color del texto a rojo
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

   //  Crear objeto de opciones de renderizado
   const renderOptions = {
       enableJavaScript: true,
   };

   //  Convertir contenido HTML en PDF
   const pdf = await PdfDocument.fromHtml(htmlWithJavaScript, { renderOptions });

   //  Guardar el PDF con el JavaScript ejecutado
   await pdf.saveAs("javascript-in-html.pdf");
})();

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
   //  Defina el código JavaScript para cambiar el color del texto a rojo
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

   //  Crear objeto de opciones de renderizado
   const renderOptions = {
       enableJavaScript: true,
   };

   //  Convertir contenido HTML en PDF
   const pdf = await PdfDocument.fromHtml(htmlWithJavaScript, { renderOptions });

   //  Guardar el PDF con el JavaScript ejecutado
   await pdf.saveAs("javascript-in-html.pdf");
})();

JAVASCRIPT

También puede ejecutar JavaScript personalizado que modifican sin esfuerzo la apariencia del contenido HTML con código JavaScript:

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
   //  Defina el código JavaScript para cambiar el color del texto a rojo
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   //  Crear objeto de opciones de renderizado
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   //  Contenido HTML a mostrar
   const htmlContent = "<h1>Happy New Year!</h1>";

   //  Convertir contenido HTML en PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   //  Guardar el PDF con el JavaScript ejecutado
   await pdf.saveAs("executed_js.pdf");
})();

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
   //  Defina el código JavaScript para cambiar el color del texto a rojo
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   //  Crear objeto de opciones de renderizado
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   //  Contenido HTML a mostrar
   const htmlContent = "<h1>Happy New Year!</h1>";

   //  Convertir contenido HTML en PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   //  Guardar el PDF con el JavaScript ejecutado
   await pdf.saveAs("executed_js.pdf");
})();

JAVASCRIPT

Cómo crear archivos PDF en JavaScript: Figura 2

Cuando hagamos clic en el botón de descarga, se descargará el archivo PDF como se muestra en la página PDF de la imagen anterior. El archivo PDF creado será como el que se muestra a continuación.

Cómo crear archivos PDF en JavaScript: Figura 3

Encontrará tutoriales más detallados aquí.

Conclusión

Cabe mencionar que cuando es utilizado por otros, el código JavaScript mostrado arriba tiene el potencial de uso indebido y problemas de seguridad. Es fundamental tener en cuenta peligros como el acceso no autorizado y las vulnerabilidades de seguridad de los datos al colocar dicho código en una página o sitio web. Además, también es importante tener en cuenta la necesidad de dar soporte a navegadores obsoletos que podrían no disponer de todas las funciones necesarias y los problemas de compatibilidad con diversos sistemas y navegadores.

IronPDF no sólo está disponible para Node.js, sino también para otras plataformas populares como .NET, Java y Python. Esta disponibilidad multiplataforma garantiza coherencia y flexibilidad a los desarrolladores que trabajan con diferentes pilas tecnológicas. Gracias a su amplio conjunto de funciones, su perfecta integración y su sólido rendimiento, IronPDF es una valiosa herramienta para los desarrolladores que buscan agilizar la generación de PDF en sus proyectos Node.js.

Para dar cabida a las distintas demandas de los desarrolladores, la biblioteca ofrece diversas opciones de licencia, entre las que se incluyen un prueba gratuita licencia y desarrollador adicional licencias que están a la venta. El paquete $749 Lite incluye una licencia permanente, una garantía de devolución del dinero de 30 días, un año de soporte de software y opciones de actualización. No hay más gastos aparte de la compra inicial.

< ANTERIOR
Cómo crear un archivo PDF en React

SIGUIENTE >
Cómo ver archivos PDF en JavaScript