Cómo generar un archivo PDF usando JavaScript
1.0 Introducción
Adobe desarrolló el Portable Document Format (PDF) con el propósito de 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 bastante cruciales para documentos importantes. Para crear documentación y facturas, muchas empresas usan archivos PDF. Los desarrolladores producen y generan PDFs de documentos para satisfacer las necesidades de los clientes. La capacidad de crear PDFs nunca ha sido más fácil gracias a las bibliotecas modernas. Cuando seleccionamos la biblioteca ideal para un proyecto, debemos considerar varios factores, incluidas las capacidades de construcción, lectura y conversión de la biblioteca.
En este artículo, discutiremos varias bibliotecas de JavaScript para la creación de PDFs. Exploraremos las características y casos de uso de la biblioteca JS, centrándonos en tres aspectos clave:
- Compatibilidad con el entorno de ejecución
- Soporte para fuentes personalizadas y módulos para tipografía
- Facilidad de uso
Al final de este artículo, podrás elegir la biblioteca PDF más adecuada para tu aplicación JavaScript. También presentaremos IronPDF, una potente y práctica biblioteca PDF.
Pasos para generar archivos PDF en JavaScript
- Utilice el método
textde la biblioteca PDFKit para insertar texto en el PDF - Utilizar el método
createPdfde la biblioteca pdfmake en JavaScript - Instanciar la clase jsPDF de la biblioteca jsPDF para crear el PDF
- Pasar configuraciones al método
html2pdfde la biblioteca html2pdf - Utilice el método
RenderHtmlAsPdfde la biblioteca IronPDF
Librerías 2.0
Digamos que queremos que el cliente pueda descargar e imprimir una factura que tenemos. También queremos que esta factura se imprima correctamente, con buen formato. Aquí veremos algunas de las bibliotecas más populares para convertir esta factura de formato HTML a PDF.
2.1 PDFKit
Una de las primeras bibliotecas PDF introducidas en el extenso ecosistema de JavaScript es PDFKit. Desde su lanzamiento inicial en 2012, ha ganado popularidad considerable y sigue recibiendo actualizaciones regulares desde 2021. PDFKit ofrece soporte para Node.js y navegadores web a través de Webpack, aunque puede presentar un nivel de complejidad ligeramente mayor en comparación con otras bibliotecas discutidas aquí. Además, como observaremos en la comparación, ciertas bibliotecas PDF son esencialmente envoltorios para PDFKit.
Se admiten fuentes personalizadas e incrustación de imágenes; sin embargo, no hay una API de alto nivel. Además, la documentación suele ser complicada. Como puedes anticipar, lleva tiempo acostumbrarse, y al principio, descubrirás que crear PDFs no es la tarea más sencilla.
// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();2.2 pdfmake
Una biblioteca envolvente para PDFKit se llama pdfmake. La principal diferencia entre los dos 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 PDFs 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, vale la pena señalar que no todo lo que parece prometedor es perfecto. Usar Webpack e intentar integrar fuentes personalizadas con pdfmake puede potencialmente generar problemas. Desafortunadamente, hay información limitada disponible en línea sobre este problema. Si no estás utilizando Webpack, aún puedes clonar sin esfuerzo el repositorio de 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() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
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() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html>La salida del código mencionado anteriormente se muestra a continuación.
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 la formatea según el formato que proporciones. jsPDF es la biblioteca PDF más utilizada en GitHub y es altamente confiable y bien mantenida. Ofrece módulos fáciles de usar tanto para Node.js como para navegadores web, ya que se exportan en conformidad con el estándar de módulo AMD.
En cuanto a PDFKit, sus API siguen un paradigma imperativo, lo que puede hacer que diseñar diseños complejos sea un desafío. En cuanto a la incrustación de fuentes, el único paso adicional requerido es convertir las fuentes a archivos TTF, lo cual es 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() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
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() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
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 solo módulo.
Para convertir tu sitio web a PDF, sigue estos pasos:
- Instala la biblioteca JavaScript html2pdf localmente en tu servidor usando NPM o inclúyela en tu código HTML como se muestra en el siguiente ejemplo:
- Agrega una función 'generar PDF' que se llamará para convertir el segmento especificado de la página web en un PDF. Puedes usar el método
getElementByIdpara seleccionar el segmento deseado. - Personaliza las opciones de formato agregándolas a la variable 'opt' antes de pasarlas a html2pdf. Esto te permite definir varias configuraciones para la generación de PDFs.
- Incluye un botón en tu página HTML que active la función
generatePDFcuando se haga clic.
<!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() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
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() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>A continuación se muestra la salida del código anterior.
2.5 IronPDF
IronPDF para Node.js simplifica el proceso de creación y personalización de documentos PDF programáticamente. 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 PDFs: Con IronPDF, los desarrolladores pueden generar PDFs a partir de diversas fuentes, incluidas 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 permite a los desarrolladores 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 características de seguridad robustas 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 rendimiento óptimo, con soporte completo para multihilo y asincronía. Esto asegura una generación de PDF eficiente, haciéndolo adecuado para aplicaciones críticas donde el rendimiento es primordial.
Conjunto de Características Completo: 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.
Para generar un archivo PDF usando JavaScript personalizado, observa el siguiente código que hace que el contenido HTML sea más atractivo sin esfuerzo:
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. Este código se integra luego en las opciones de renderizado junto con la habilitación de la ejecución de JavaScript. Posteriormente, se especifica 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 ejecute durante el proceso de renderizado. Finalmente, el documento PDF resultante se guarda como "result1.pdf". Este código muestra la capacidad de IronPDF para incorporar modificaciones dinámicas de JavaScript en la generación de PDF, permitiendo a los desarrolladores crear documentos PDF personalizados e interactivos programáticamente.
3.0 Conclusión
En conclusión, el código JavaScript presentado anteriormente puede ser susceptible de uso indebido y posibles riesgos de seguridad cuando lo utilicen otros. Es importante considerar la posibilidad de acceso no autorizado y vulnerabilidades de seguridad de datos al implementar dicho código en un sitio web. También se deben tener en cuenta problemas de compatibilidad entre diferentes navegadores y plataformas, incluida la necesidad de garantizar el soporte para navegadores más antiguos que pueden no tener todas las funcionalidades necesarias.
En contraste, la biblioteca IronPDF para Node.js ofrece medidas de seguridad mejoradas para proteger contra posibles amenazas. No depende de navegadores específicos y es compatible con todos los principales navegadores. Con solo unas pocas líneas de código, los desarrolladores pueden crear y leer fácilmente archivos PDF usando IronPDF.
La biblioteca ofrece varias opciones de licencia para satisfacer las diferentes necesidades de los desarrolladores, incluida una licencia de prueba gratuita para desarrolladores y licencias adicionales disponibles para la compra. El paquete Lite, con un precio de $799, incluye una licencia permanente, un año de soporte de producto y opciones de actualización, sin tarifas recurrentes. Estas licencias se pueden utilizar en entornos de desarrollo, pruebas y producción. Además, también está disponible para otros lenguajes como C# .NET, Java y Python. Visita el sitio web de IronPDF para más detalles.
Comience gratis
Comience gratis
Reserve demostración en vivo gratis
No se requiere tarjeta de crédito ni creación de cuenta
