Cómo ver archivos PDF en JavaScript
Adobe creó el Formato de Documento Portátil (PDF) para habilitar el intercambio de documentos que contienen abundante texto y gráficos. Para abrir un archivo PDF en línea, se requiere un programa diferente. Los archivos PDF son indispensables en el entorno actual para la publicación sustancial. Frecuentemente se utilizan en los negocios para producir documentos y facturas. Los desarrolladores generan PDF para satisfacer demandas. Las bibliotecas modernas han facilitado más que nunca la creación de PDFs. Al seleccionar la biblioteca adecuada para un proyecto que genera sus propios archivos PDF renderizados, varios aspectos deben considerarse, incluyendo capacidades de construcción, lectura y conversión.
Librerías JavaScript 2.0
Considere, por ejemplo, el escenario donde queremos que el cliente pueda descargar y ver una copia de nuestra factura. Otros aspectos que son igualmente importantes para nosotros son el diseño preciso, la impresión y el número de páginas de esta factura. En esta sección, examinaremos algunas de las bibliotecas más populares para ver documentos PDF.
2.1 HTML2PDF
HTML2PDF combina las características de jsPDF y Html2Canvas en un solo módulo para transformar páginas web y plantillas en archivos PDF completos.
Siga estos pasos para crear un PDF desde su sitio web:
- Instale la biblioteca de JavaScript html2pdf en su servidor localmente usando NPM o agréguela a su código HTML como se muestra en el ejemplo a continuación.
- Cree una función llamada
viewPDFque se utilizará para convertir la sección de la página web objetivo en un PDF. Use la funcióngetElementByIdpara seleccionar el segmento deseado. - Antes de pasarlo a
html2pdf, modifique las opciones de formato agregándolas a la variableopt. Esto le permite personalizar varios ajustes para la producción de PDF. - Incluya un botón en su página HTML que, al hacer clic, active la función
viewPDF. Esta función generará el PDF y lo abrirá en una pestaña separada del navegador.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function viewPDF() {
// Select the element to convert to PDF
const element = document.getElementById('content-to-print');
// Define PDF formatting options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Create and open the PDF
let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
.then((data) => {
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
}
</script>
</head>
<body>
<div id="content-to-print">
<!-- Content to convert to PDF -->
<h1>Hello World!</h1>
</div>
<button onclick="viewPDF()">View 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 viewPDF() {
// Select the element to convert to PDF
const element = document.getElementById('content-to-print');
// Define PDF formatting options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Create and open the PDF
let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
.then((data) => {
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
}
</script>
</head>
<body>
<div id="content-to-print">
<!-- Content to convert to PDF -->
<h1>Hello World!</h1>
</div>
<button onclick="viewPDF()">View PDF</button>
</body>
</html>
2.3 jsPDF
Un software de código abierto llamado jsPDF crea archivos PDF usando solo JavaScript. Genera un objeto de página como una página PDF y lo formatea según el formato proporcionado. La biblioteca de PDF más frecuentemente utilizada y bien mantenida en GitHub también se llama jsPDF. Proporciona módulos fáciles de usar tanto para Node.js como para navegadores web ya que se exportan en cumplimiento con el estándar de módulo AMD.
Cuando se trata de PDFKit, sus APIs siguen un modelo imperativo, lo que puede hacer que la construcción de diseños complejos sea difícil. El único paso adicional necesario para la incrustación de fuentes con JavaScript es convertir las fuentes a archivos TTF, lo cual es un procedimiento simple. En el ejemplo de código a continuación, creamos un archivo PDF y luego abrimos el PDF creado en una pestaña separada en un navegador web.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function viewPDF() {
// 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);
// Open the generated PDF in a new browser tab
window.open(pdf.output('bloburl'));
}
</script>
</head>
<body>
<button onclick="viewPDF()">View 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 viewPDF() {
// 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);
// Open the generated PDF in a new browser tab
window.open(pdf.output('bloburl'));
}
</script>
</head>
<body>
<button onclick="viewPDF()">View Pdf</button>
</body>
</html>2.3 IronPDF
IronPDF for Node.js simplifica el proceso de crear y personalizar 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.
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.
El siguiente ejemplo de código crea el documento PDF usando JavaScript y luego se visualiza directamente desde la aplicación:
import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";
(async () => {
try {
// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
// Save the PDF to a temporary file
const filePath = "html-with-assets.pdf";
await pdf.saveAs(filePath);
// Open the PDF file using the default system application
open(filePath);
} catch (error) {
console.error("Error creating or opening PDF:", error);
}
})();import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";
(async () => {
try {
// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
// Save the PDF to a temporary file
const filePath = "html-with-assets.pdf";
await pdf.saveAs(filePath);
// Open the PDF file using the default system application
open(filePath);
} catch (error) {
console.error("Error creating or opening PDF:", error);
}
})();En este código:
- Generamos el documento PDF (
pdf) a partir del contenido HTML. - Guardamos el documento PDF en un archivo temporal (
html-with-assets.pdf) usandosaveAs. - Usamos la función
opendel paqueteopenpara abrir el archivo PDF usando la aplicación predeterminada del sistema. Esto generalmente abrirá el PDF en el visor de PDF por defecto instalado en el sistema o en el navegador predeterminado.
Para más ejemplos de código sobre tareas relacionadas con PDF, por favor visite esta página de ejemplos de código de IronPDF Node.js.
La salida se generará y mostrará como en la imagen anterior. Para saber más sobre IronPDF, por favor consulte la Guía del Visor de PDF IronPDF for .NET.
3.0 Conclusión
Finalmente, es importante notar que el código JavaScript mostrado en la primera página arriba tiene el potencial de ser mal utilizado y puede representar riesgos de seguridad cuando es usado por otros. Al incorporar dicho código en una página web o sitio web, es crucial considerar los riesgos de acceso no autorizado y vulnerabilidades de seguridad de datos. Además, se deben tener en cuenta problemas de compatibilidad con navegadores obsoletos y diferentes sistemas operativos y navegadores.
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 atender a diferentes necesidades de los desarrolladores, incluyendo una licencia de prueba gratuita para desarrolladores y licencias adicionales para comprar. 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, IronPDF también está disponible para otros lenguajes como C# .NET, Java, y Python. Visite 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
