HERRAMIENTAS PDF

Cómo ver archivos PDF en JavaScript

Publicado en 13 de junio, 2023

Introducción

Adobe creó el formato de documento portátil(PDF) para poder compartir documentos con abundante texto y gráficos. Para abrir un archivo PDF en línea, se necesita otro programa. Los archivos PDF son indispensables en el entorno actual para una publicación sustancial. Se utilizan con frecuencia en las empresas para elaborar documentos y facturas. Los desarrolladores generan archivos PDF para satisfacer las demandas de los clientes. Las bibliotecas modernas han facilitado más que nunca la creación de archivos PDF. Al seleccionar la biblioteca adecuada para un proyecto que genera sus propios archivos PDF renderizados, hay que tener en cuenta varios aspectos, como las capacidades de construcción, lectura y conversión.

2.0 Bibliotecas JavaScript

Consideremos, por ejemplo, el caso en el que queremos que el cliente pueda descargar y ver una copia de nuestra factura. Otras cosas 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 visualizar documentos PDF.

2.1 HTML2PDF

HTML2PDF combina las funciones de jsPDF y Html2Canvas en un único módulo para transformar páginas web y plantillas en archivos de documentos PDF completos.

Siga estos pasos para crear un PDF desde su sitio web:

Instale la biblioteca JavaScript html2pdf en su servidor localmente mediante NPM o añádala a su código HTML como se muestra en el siguiente ejemplo.
Cree una función llamada generatePDF que se utilizará para convertir la sección de la página web seleccionada en un PDF. Utilice la función getElementById para seleccionar el segmento deseado.
Antes de pasarlo a html2pdf, modifica las opciones de formato añadiéndolas a la variable opt. Esto le permite personalizar varios ajustes para la producción de PDF.
Incluya un botón en su página HTML que, al pulsarlo, 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() {
   const element = '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(element).save();

    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })

   }
  </script>
  </head>
  <body>
    <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() {
   const element = '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(element).save();

    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })

   }
  </script>
  </head>
  <body>
    <button onclick="viewpdf()">View PDF</button>
</body>
</html>

HTML

Cómo ver archivos PDF en JavaScript: Figura 1

2.3 jsPDF

Un programa de código abierto llamado jsPDF crea archivos PDF utilizando únicamente JavaScript. Genera un objeto de página como una página PDF y le da formato basándose en el formato suministrado. La biblioteca PDF más utilizada y mejor 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 conforme al estándar de módulos AMD.

En lo que respecta a PDFKit, sus API siguen un modelo imperativo, lo que puede dificultar la creación de diseños complejos. El único paso adicional necesario para incrustar fuentes con JavaScript es convertir las fuentes en archivos TTF, un procedimiento sencillo. En el siguiente ejemplo de código, creamos un archivo PDF y, a continuación, abrimos el PDF creado en una pestaña independiente de un navegador web. El resultado será similar a las imágenes mostradas anteriormente.

<!DOCTYPE html>
 <html>
     <head>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
         <script>
             function viewPDF() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                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() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                window.open(pdf.output('bloburl'))
             }
         </script>
     </head>
     <body>
         <button onclick="viewPDF()">View Pdf</button>
     </body>
 </html>

HTML

2.3 IronPDF

IronPDF for 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.
El siguiente ejemplo de código crea el documento PDF utilizando JavaScript y luego se visualiza directamente desde la aplicación:

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

(async () => {
   // 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 advancedPdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
})();

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

(async () => {
   // 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 advancedPdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
})();

JAVASCRIPT

En este código:

Generamos el documento PDF(advancedPdf) del contenido HTML con activos.
Guardamos el documento PDF en un archivo temporal(html-with-assets.pdf) usando saveAs.
Utilizamos la función open del paquete open para abrir el archivo PDF utilizando la aplicación predeterminada del sistema. Normalmente, esto abrirá el PDF en el visor de PDF predeterminado instalado en el sistema o, si no, en el navegador predeterminado.
Para ver más ejemplos de código sobre tareas relacionadas con PDF, visite este enlaceEjemplos de código IronPDF for Node.js página.
La salida se generará y se mostrará como la imagen de arriba. Para obtener más información sobre IronPDF, consulte la página webGuía del visor de PDF IronPDF .NET.

3.0 Conclusión

Por último, es importante tener en cuenta que el código JavaScript que aparece en la primera página de arriba tiene el potencial de ser mal utilizado y puede plantear riesgos de seguridad cuando es utilizado por terceros. Al incorporar este tipo de código a una página o sitio web, es crucial tener en cuenta los riesgos de acceso no autorizado y las vulnerabilidades de seguridad de los datos. Además, hay que tener en cuenta los problemas de compatibilidad con navegadores obsoletos y diferentes sistemas operativos y navegadores.

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 a la venta. 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, IronPDF también está disponible para otros idiomas comoC# .NET, JavayPython. Visite elSitio web de IronPDF para más detalles.

< ANTERIOR
Cómo crear archivos PDF en JavaScript

SIGUIENTE >
Cómo generar un archivo PDF con JavaScript