Cómo generar un archivo PDF con JavaScript

1.0 Introducción

Adobe desarrolló el formato de documento portátil(PDF) para compartir documentos con texto y gráficos. Se necesita un programa adicional para abrir un archivo PDF en línea. En el mundo moderno, los archivos PDF son cruciales para documentos importantes. Para crear documentación y facturas, muchas empresas utilizan archivos PDF. Los desarrolladores producen y generan documentos PDF para satisfacer las necesidades de los clientes. Crear archivos PDF nunca ha sido tan fácil gracias a las bibliotecas modernas. A la hora de seleccionar la biblioteca ideal para un proyecto, debemos tener en cuenta una serie de factores, como las capacidades de compilación, lectura y conversión de la biblioteca.

En este artículo, hablaremos de varias bibliotecas JavaScript para la creación de PDF. Exploraremos las características y casos de uso de la biblioteca JS, centrándonos en tres aspectos clave:

• Compatibilidad con entornos de ejecución
• Compatibilidad con fuentes personalizadas y módulos para tipografía

• Facilidad de uso

  Al final de este artículo, podrá elegir la biblioteca PDF más adecuada para su aplicación JavaScript. También presentaremos IronPDF, una potente y práctica biblioteca PDF.

  Pasos para generar archivos PDF en Javscript

  1. Utiliza el texto de la biblioteca PDFKit para insertar texto en el PDF
  2. Utilice el crearPdf de la biblioteca pdfmake en JavaScript
  3. Instanciar la clase jsPDF de la biblioteca jsPDF para crear el PDF
  4. Pasar configuraciones al html2pdf de la biblioteca html2pdf
  5. Utilice el RenderHtmlAsPdf de la biblioteca IronPDF

2.0 Bibliotecas

Supongamos que queremos que el cliente pueda descargar e imprimir una factura nuestra. También queremos que esta factura se imprima correctamente, con un buen formato. Aquí veremos algunas de las bibliotecas más conocidas para convertir esta factura de formato HTML a PDF.

2.1 PDFKit

Una de las primeras bibliotecas PDF en introducirse en el amplio ecosistema JavaScript es PDFKit. Desde su lanzamiento inicial en 2012, ha ganado una popularidad considerable y sigue recibiendo actualizaciones periódicas a partir de 2021. PDFKit ofrece compatibilidad tanto con Node.js como con navegadores web a través de Webpack, aunque puede presentar un nivel de complejidad ligeramente superior en comparación con otras bibliotecas analizadas aquí. Además, como observaremos en la comparación, ciertas bibliotecas PDF son esencialmente envoltorios de PDFKit.

Se admiten fuentes personalizadas e incrustación de imágenes, pero no existe una API de alto nivel. Además, la documentación suele ser complicada. Como puedes prever, cuesta acostumbrarse y, al principio, descubrirás que crear PDF no es la tarea más sencilla.

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

2.2 pdfmake

Una biblioteca que envuelve PDFKit se llama pdfmake. La principal diferencia entre ambas radica en sus paradigmas de programación:

pdfmake adopta un enfoque declarativo, mientras que PDFKit sigue la técnica imperativa tradicional. Como resultado, centrarse en la funcionalidad deseada de la generación de PDF es más fácil con la biblioteca pdfmake, en lugar de pasar tiempo instruyendo a la biblioteca sobre cómo lograr un resultado específico.

Sin embargo, cabe señalar que no todo lo que parece prometedor es perfecto. Usar Webpack e intentar integrar fuentes personalizadas con pdfmake puede dar lugar a problemas. Por desgracia, la información disponible en Internet sobre este problema es limitada. Si no utilizas Webpack, puedes clonar sin esfuerzo el repositorio Git y ejecutar el script de incrustación de fuentes.

<!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 downloadPdf() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(docDefinition).print();
            }
        </script>
        <button onclick="downloadPdf()">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 downloadPdf() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(docDefinition).print();
            }
        </script>
        <button onclick="downloadPdf()">Print pdf</button>
    </body>
</html>

A continuación se muestra el resultado obtenido.

2.3 jsPDF

jsPDF es un paquete de código abierto que emplea exclusivamente JavaScript puro para generar archivos PDF. Crea una página PDF y le da formato basándose en el formato proporcionado. jsPDF es la biblioteca PDF más utilizada en GitHub y es muy fiable y está bien mantenida. Ofrece módulos fáciles de usar tanto para Node.js como para navegadores web, ya que se exportan de acuerdo con el estándar de módulos AMD.

En cuanto a PDFKit, sus API siguen un paradigma imperativo, lo que puede dificultar el diseño de composiciones complejas. En cuanto a la incrustación de fuentes, el único paso adicional necesario es convertir las fuentes en archivos TTF, un proceso sencillo.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
        <script>
            function generatePDF() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                pdf.save('Demopdf.pdf');
            }
        </script>
    </head>
    <body>
        <button onclick="generatePDF()">print Pdf</button>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
        <script>
            function generatePDF() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                pdf.save('Demopdf.pdf');
            }
        </script>
    </head>
    <body>
        <button onclick="generatePDF()">print Pdf</button>
    </body>
</html>

La salida del código anterior se muestra a continuación.

2.4 html2pdf

Para convertir páginas web y plantillas en archivos PDF, html2pdf combina las funcionalidades de jsPDF y Html2Canvas en un único módulo.

Para convertir su sitio web en PDF, siga estos pasos:

1. Instale la biblioteca JavaScript html2pdf localmente en su servidor mediante NPM o inclúyala en su código HTML como se muestra en el ejemplo siguiente:

2. Añade una función "generar PDF" que será llamada para convertir el segmento especificado de la página web en un PDF. Puede utilizar el método getElementById para seleccionar el segmento deseado.

3. Personaliza las opciones de formato añadiéndolas a la variable "opt" antes de pasarla a html2pdf. Permite definir varios ajustes para la generación de PDF.

4. Incluya un botón en su página HTML que active la función generatePDF al hacer clic en él.

<!DOCTYPE html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
    function generatePDF() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    html2pdf().set(opt).from(page).save();
    }
    </script>
    </head>
    <body>
    <button onclick="generatePDF()">print Pdf</button>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
    function generatePDF() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    html2pdf().set(opt).from(page).save();
    }
    </script>
    </head>
    <body>
    <button onclick="generatePDF()">print Pdf</button>
</body>
</html>

A continuación se muestra el resultado del código anterior.

2.5 IronPDF

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

  Para generar un archivo PDF conJavaScript personalizadoSi desea más información, eche un vistazo al siguiente código, que sin esfuerzo hace que el contenido HTML sea más atractivo:

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

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();

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

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();

En el código anterior, inicialmente, se define un fragmento de código JavaScript para cambiar el color de todos los elementos <h1> a rojo. A continuación, este código se integra en las opciones de renderizado junto con la activación de la ejecución de JavaScript. A continuación, un contenido HTML que contiene un elemento <h1> con el texto "Hola Mundo!!". El documento PDF se genera a partir de este contenido HTML con las opciones de renderizado definidas, asegurando que el código JavaScript se ejecuta durante el proceso de renderizado. Por último, el documento PDF resultante se guarda como "resultado1.pdf". Este código muestra la capacidad de IronPDF para incorporar modificaciones dinámicas de JavaScript en la generación de PDF, lo que permite a los desarrolladores crear documentos PDF personalizados e interactivos mediante programación.

3.0 Conclusión

En conclusión, el código JavaScript presentado anteriormente puede ser susceptible de uso indebido y de riesgos potenciales para la seguridad cuando es utilizado por terceros. Es importante tener en cuenta la posibilidad de que se produzcan accesos no autorizados y vulnerabilidades en la seguridad de los datos a la hora de implantar este tipo de código en un sitio web. También deben tenerse en cuenta los problemas de compatibilidad entre distintos navegadores y plataformas, incluida la necesidad de garantizar la compatibilidad con navegadores antiguos que pueden no disponer de todas las funcionalidades necesarias.

En cambio, la biblioteca IronPDF Node.js ofrece medidas de seguridad mejoradas para protegerse de posibles amenazas. No depende de navegadores específicos y es compatible con los principales navegadores. Con sólo unas pocas líneas de código, los desarrolladores pueden crear y leer fácilmente archivos PDF utilizando IronPDF.

La biblioteca ofrece varias opciones de licencia para satisfacer las distintas necesidades de los desarrolladores, entre las que se incluyen unprueba gratuita licencia para desarrolladores ylicencias disponibles para su compra. El paquete Lite, con un precio de $749, incluye una licencia permanente, un año de soporte del producto y opciones de actualización, sin cuotas periódicas. Estas licencias se pueden utilizar en entornos de desarrollo, ensayo y producción. Además, también está disponible para otros idiomas comoC# .NET, Java yPython. Visite elIronPDF para más información.