Pruebas en un entorno real
Pruebe en producción sin marcas de agua.
Funciona donde lo necesites.
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:
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.
texto
method of the PDFKit library to insert texto into the PDFcrearPdf
de la biblioteca pdfmake en JavaScripthtml2pdf
de la biblioteca html2pdfRenderHtmlAsPdf
de la biblioteca IronPDFSupongamos 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.
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();
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.
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.
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:
getElementById
para seleccionar el segmento deseado.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.
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:
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 con JavaScript 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");
})();
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.
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 un prueba gratuita licencia para desarrolladores y licencias 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 como C# .NET, Java y Python. Visite el IronPDF para más información.
9 productos API .NET para sus documentos de oficina