Saltar al pie de página
HERRAMIENTAS PDF

Cómo crear archivos PDF en JavaScript

En el ámbito del intercambio de documentos, el Formato de Documento Portátil (PDF), pionero por Adobe, desempeña un papel crucial en preservar la integridad de contenido rico en texto y visualmente atractivo. Acceder a un archivo PDF en línea generalmente requiere un programa específico. En el panorama digital actual, los archivos PDF se han vuelto indispensables para varias publicaciones importantes. Muchas empresas dependen de archivos PDF para crear documentos profesionales y facturas. Además, los desarrolladores a menudo aprovechan las bibliotecas de creación de PDF para cumplir con requisitos específicos de los clientes. El proceso para generar PDFs se ha simplificado con la llegada de las bibliotecas modernas. Al seleccionar la biblioteca más adecuada para un proyecto que implique la generación de PDF, es esencial considerar factores como las capacidades de construcción, lectura y conversión, asegurando una integración sin problemas y un rendimiento óptimo.

Bibliotecas JavaScript

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

En esta sección, profundizaremos en una serie de bibliotecas de JavaScript altamente reconocidas que sobresalen en la conversión y creación de documentos HTML a PDF, proporcionando herramientas versátiles para una generación y conversión de documentos eficientes y precisas.

1. PDFKit

PDFKit fue una biblioteca de PDF que fue una de las primeras en lanzarse en el vasto ecosistema de bibliotecas de JavaScript. Ha crecido significativamente en popularidad desde su lanzamiento inicial en 2012, y a partir de 2021, sigue recibiendo actualizaciones regulares.

Usando Webpack, PDFKit ofrece soporte tanto para la biblioteca de Node como para navegadores web, se admiten fuentes personalizadas y la inserción de imágenes.

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

No hay una API de alto nivel disponible para PDFKit. La documentación con frecuencia es difícil también. Requiere cierto tiempo de adaptación, como podrías esperar, y podrías encontrar que producir PDFs usando JavaScript no siempre es la tarea más sencilla.

// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

// Create a new PDF document instance
const doc = new PDFDocument();

// Add text content to the PDF document
doc.text('Hello world!');

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

// Create a new PDF document instance
const doc = new PDFDocument();

// Add text content to the PDF document
doc.text('Hello world!');

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.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, usar la biblioteca pdfmake hace que sea más sencillo concentrarse en la funcionalidad prevista de la producción de PDF en lugar de perder tiempo enseñando a la biblioteca cómo lograr un cierto resultado.

Es crucial tener en cuenta que, aunque ciertas soluciones puedan parecer prometedoras, podrían no ser perfectas. Un ejemplo de ello es la integración de fuentes personalizadas con pdfmake al utilizar Webpack, lo que puede potencialmente causar problemas. Lamentablemente, hay una documentación en línea limitada disponible sobre este problema específico. Sin embargo, si no estás utilizando Webpack, puedes clonar fácilmente el repositorio Git y ejecutar el script de inserción de fuentes para superar cualquier obstáculo potencial asociado con 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 to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <!-- Button to trigger PDF creation and printing -->
    <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 to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <!-- Button to trigger PDF creation and printing -->
    <button onclick="CreatePdf()">Print pdf</button>
</body>
</html>
HTML

Cómo Crear Archivos PDF en JavaScript: Figura 1

3. IronPDF

IronPDF fue creado para facilitar a los desarrolladores la creación, navegación y edición de documentos PDF. Funciona como un potente convertidor de PDF y ofrece una API base para crear, editar y procesar archivos PDF.

IronPDF para Node.js simplifica el proceso de crear y personalizar documentos PDF de manera programática. Desarrollado por Iron Software, un proveedor de confianza de bibliotecas de procesamiento de documentos de alto rendimiento, IronPDF ofrece una solución robusta para la generación de PDF dentro de entornos Node.js. Se integra sin problemas con proyectos de Node.js, proporcionando a los desarrolladores herramientas poderosas para generar, formatear y editar PDFs con facilidad.

La biblioteca IronPDF tiene una amplia gama de características, incluida la capacidad de dividir y combinar páginas en documentos PDF nuevos o existentes, leer y editar archivos PDF existentes, extraer imágenes de archivos PDF, agregar texto, gráficos, marcadores, marcas de agua, encabezados y pies de página a archivos PDF, todo sin necesidad de Acrobat Reader. De archivos CSS y CSS media, se pueden producir documentos PDF. IronPDF permite a los usuarios crear, subir y actualizar formularios PDF nuevos y preexistentes.

Características Clave de IronPDF para Node.js:

  • Generación Versátil de PDF: Con IronPDF, los desarrolladores pueden generar PDFs desde varias fuentes, incluyendo HTML, CSS, JavaScript, imágenes y otros tipos de archivos. Esta flexibilidad permite la creación de documentos PDF dinámicos y visualmente atractivos adaptados a requisitos específicos.
  • Personalización Avanzada de Documentos: IronPDF empodera a los desarrolladores para mejorar los documentos PDF con características como encabezados, pies de página, adjuntos, firmas digitales, marcas de agua y marcadores. Esto permite la creación de PDFs de calidad profesional con contenido enriquecido y elementos interactivos.
  • Características de Seguridad: IronPDF ofrece robustas características de seguridad para proteger los PDFs contra el acceso no autorizado. Los desarrolladores pueden implementar medidas de seguridad como contraseñas, firmas digitales, metadatos y otras configuraciones de seguridad para salvaguardar la información sensible contenida dentro de los documentos PDF.
  • Rendimiento Optimizado: IronPDF está diseñado para un rendimiento óptimo, con soporte completo de multihilo y asíncrono. Esto asegura una generación de PDF eficiente, haciéndolo adecuado para aplicaciones críticas donde el rendimiento es primordial.
  • Conjunto Completo de Características: Con más de 50 características para crear, formatear y editar documentos PDF, IronPDF proporciona una solución completa para todas las tareas relacionadas con PDF. Desde la generación básica de documentos hasta la personalización avanzada y la seguridad, IronPDF ofrece una amplia gama de capacidades para satisfacer las necesidades de los desarrolladores.

El código a continuación demuestra cómo usar JavaScript para renderizar HTML en un archivo PDF perfecto en píxeles:

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

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

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

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

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

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();
JAVASCRIPT

También puedes ejecutar JavaScript personalizado que modifica sin esfuerzo la apariencia del contenido HTML:

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

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

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

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

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

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

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

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

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();
JAVASCRIPT

Cómo Crear Archivos PDF en JavaScript: Figura 2

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

Cómo Crear Archivos PDF en JavaScript: Figura 3

Conclusión

Cabe mencionar que cuando es usado por otros, el código JavaScript mostrado arriba tiene el potencial de ser mal utilizado y presentar problemas de seguridad. Es crucial considerar los peligros como el acceso no autorizado y las vulnerabilidades de seguridad de datos al colocar tal código en una página web o sitio web. Además, también es importante tener en cuenta la necesidad de soportar navegadores obsoletos que podrían no tener todas las funciones necesarias y los problemas de compatibilidad con varios sistemas y navegadores.

IronPDF no solo está disponible para Node.js sino también para otras plataformas populares, incluyendo .NET, Java, y Python. Esta disponibilidad multiplataforma asegura consistencia y flexibilidad para los desarrolladores que trabajan en diferentes pilas tecnológicas. Con su rico conjunto de características, integración sin problemas y rendimiento robusto, IronPDF es una herramienta valiosa para los desarrolladores que buscan agilizar la generación de PDF dentro de sus proyectos de Node.js.

Para satisfacer las diversas demandas de los desarrolladores, la biblioteca ofrece una variedad de opciones de licenciamiento, incluyendo una licencia de prueba gratuita y licencias de desarrollador adicionales que están disponibles para su compra. El paquete Lite $799 viene con una licencia permanente, una garantía de devolución de dinero de 30 días, un año de soporte de software y opciones de actualización. No hay más gastos más allá de la compra inicial.

Darrius Serrant
Ingeniero de Software Full Stack (WebOps)

Darrius Serrant tiene una licenciatura en Ciencias de la Computación de la Universidad de Miami y trabaja como Ingeniero de Marketing WebOps Full Stack en Iron Software. Atraído por la programación desde joven, vio la computación como algo misterioso y accesible, convirtiéndolo en el ...

Leer más