Impresión eficiente de PDFs en JavaScript

Imprimir PDFs directamente desde un navegador web usando JavaScript no es sencillo debido a las inconsistencias entre navegadores y las consideraciones de seguridad. Sin embargo, varias técnicas pueden activar eficazmente el diálogo de impresión del navegador para PDFs. Este artículo explora dos métodos populares: aprovechar un iframe y utilizar la biblioteca Print.js.

Tabla de contenido

• Imprimir PDFs con la etiqueta iframe
• Imprimir PDFs con la biblioteca Print.js
• Elegir el método adecuado

Imprimir PDFs con la etiqueta iframe

Este enfoque es simple, sin necesidad de bibliotecas externas. Incrusta el PDF en un iframe y luego activa la impresión desde el contexto del iframe.

Implementación:

1. Incrustar el PDF: Usa una etiqueta <iframe>, estableciendo su atributo src en la URL del PDF y ocultándolo usando CSS:

<iframe id="pdf-iframe" src="your-pdf-file.pdf" style="display: none;"></iframe>

2. Activar la impresión: Usa JavaScript para acceder a la ventana de contenido del iframe y llamar a su método print():

function printPdf() {
  const iframe = document.getElementById('pdf-iframe');
  if (iframe.contentWindow) { // Comprobar si contentWindow existe para prevenir errores
    iframe.contentWindow.focus(); // Asegurar que el iframe esté enfocado antes de imprimir
    iframe.contentWindow.print();
  } else {
    console.error("Error: No se pudo acceder a la ventana de contenido del iframe.");
  }
}

3. Agregar un botón de impresión: Crea un botón que llame a printPdf():

<button onclick="printPdf()">Imprimir PDF</button>

Limitaciones:

• Compatibilidad con el navegador: La fiabilidad varía entre navegadores. Algunos pueden requerir interacción del usuario o permisos específicos.
• Control limitado: Mínimo control sobre rangos de páginas o ajustes de impresión.
• Seguridad: Incrustar PDFs directamente puede suponer riesgos de seguridad dependiendo del origen del PDF.

Imprimir PDFs con la biblioteca Print.js

Print.js ofrece una solución más robusta y rica en funciones, gestionando las inconsistencias entre navegadores y proporcionando un mejor control. Es una biblioteca ligera que se integra fácilmente en tu proyecto.

Implementación:

1. Incluir Print.js: Agrega la biblioteca Print.js a tu HTML usando un CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/print.js/1.6.2/print.min.js"></script>

2. Activar la impresión: Usa la función printJS() de Print.js:

function printPdf() {
  printJS({
    printable: 'your-pdf-file.pdf',
    type: 'pdf',
  });
}

3. Agregar un botón de impresión (igual que antes):

<button onclick="printPdf()">Imprimir PDF</button>

Ventajas:

• Compatibilidad mejorada con el navegador: Gestiona eficazmente las diferencias entre navegadores.
• Más control: Ofrece algunas opciones de personalización en comparación con el método iframe.
• Más fácil de usar: Una API más simple e intuitiva.

Elegir el método adecuado

El método iframe es más simple pero menos fiable y proporciona menos control. Print.js ofrece una solución más robusta, rica en funciones y fácil de usar, pero requiere agregar una biblioteca externa. La mejor opción depende de las necesidades de tu proyecto, priorizando factores como la facilidad de implementación, el control requerido y la compatibilidad con el navegador.