Plugin PDF

Imprimir PDF generado con HTML

Hoy vamos a programar la impresión de un PDF generado a partir de HTML de modo que serás capaz de crear un PDF a partir de una cadena HTML indicando el tamaño de las hojas y márgenes para después enviar ese PDF a cualquier impresora de manera automáticamente.

Dicho con otras palabras te voy a enseñar a imprimir un PDF directamente desde cualquier lenguaje de programación (incluyendo JavaScript) sin diálogos de confirmación, creando ese PDF usando HTML, así puedes diseñar cualquier documento directamente con el plugin.

Descargando herramientas

Para este tutorial vas a necesitar contar con:

  1. plugin_pdf_prod_32.exe o plugin_pdf_prod_64.exe el cual se descarga en: https://github.com/parzibyte/plugin-silent-pdf-print-examples/releases/latest
  2. PDFtoPrinter.exe el cual se descarga en: https://mendelson.org/pdftoprinter.html o en https://github.com/emendelson/pdftoprinter/blob/main/PDFtoPrinter.exe?raw=true
  3. wkhtmltopdf.exe el cual se descarga en: https://wkhtmltopdf.org/downloads.html. Descarga el zip para Windows y extrae wkhtmltopdf.exe en la misma carpeta donde se encuentre plugin_pdf_prod_32.exe o plugin_pdf_prod_64.exe y PDFtoPrinter.exe

Nota: ninguna de las herramientas contiene malware, aunque los antivirus o sistemas lo detecten como tal. Es tu responsabilidad obligar al sistema a confiar en los programas y de ser necesario agregarlos a las excepciones.

También he notado que en ocasiones el navegador bloquea la descarga; de nuevo, es tu responsabilidad forzarla.

Una vez descargados, ejecuta plugin_pdf_prod_32.exe o plugin_pdf_prod_64.exe y deja a PDFtoPrinter.exe y wkhtmltopdf.exe en el mismo directorio donde se encuentra el archivo que has ejecutado.

Prueba rápida

Para hacer una prueba rápida, abre tu navegador en http://localhost:8080/version y debe aparecer:

{"version":"0.3","plataforma":"Desktop PDF","sistemaOperativo":"windows"}

Si no te aparece ese mensaje exacto, asegúrate de haber ejecutado el plugin. Te recomiendo revisar todo de nuevo, ya que si no aparece ese mensaje no podrás imprimir el documento.

También fíjate que en plataforma debe decir Desktop PDF, ya que tengo otros plugins y si bien funcionan, no tienen que ver con este tutorial específico.

Demostración

Si ya estás ejecutando el plugin y has descargado ambas herramientas, entonces puedes probar la demostración sin salir de tu navegador.

Ingresa al siguiente ejemplo: https://parzibyte.github.io/plugin-silent-pdf-print-examples/html.html

Elige tu impresora de la lista, utiliza el diseñador WYSIWYG para crear el recibo PDF a tu gusto y haz clic en Imprimir, se debería imprimir un PDF generado con el HTML contenido en el diseñador.

Crear e imprimir PDF a partir de HTML desde cualquier lenguaje de programación

Por defecto el campo ya está lleno con un diseño simple de HTML que también contiene una imagen, pero siempre puedes cambiar ese valor y generar el HTML desde cualquier lugar.

Al imprimir habrás generado un PDF a partir de HTML, incluyendo imágenes. Lo genial de esta opción es que puedes incluso ejecutar código JavaScript (dentro del HTML enviado) para generar cosas como códigos QR directamente al generar el PDF.

Si quieres ver el código completo de dicha demostración, navega al siguiente enlace: https://github.com/parzibyte/plugin-silent-pdf-print-examples/blob/main/html.html

Nota: en este caso la demostración está programada con JavaScript para que lo puedas hacer desde tu navegador web, pero el plugin puede ser invocado desde cualquier lenguaje de programación e interfaz.

Generar e imprimir PDF a partir de HTML

Ahora que has visto la demostración veamos el código fuente para imprimir este HTML de manera programada y automática desde cualquier página web o lugar.

Tienes que hacer una petición HTTP de tipo POST a la URL http://localhost:8080/html enviando un JSON con las siguientes propiedades:

  1. html: la cadena HTML para generar el PDF.
  2. nombreImpresora: una cadena indicando el nombre de la impresora en donde el PDF será impreso
  3. serial: cadena opcional si quieres apoyar al desarrollo del software, absolutamente opcional
  4. ancho: número indicando el ancho de la página en milímetros
  5. alto: número indicando el alto de la página en milímetros
  6. margenDerecho: número indicando el margen derecho
  7. margenIzquierdo: número indicando el margen izquierdo

Veamos un ejemplo con JS:

const imprimir = async () => {
    const htmlDelEditor = "Aquí va el HTML"
    const ancho = 210,
        alto = 297,
        margenIzquierdo = 0,
        margenDerecho = 0;
    const respuestaHttp = await fetch("http://localhost:8080/html", {
        method: "POST",
        body: JSON.stringify({
            html: html,
            nombreImpresora: "Aquí el nombre de tu impresora",
            serial: "",
            ancho: ancho,
            alto: alto,
            margenIzquierdo: margenIzquierdo,
            margenDerecho: margenDerecho,
        })
    });
    if (respuestaHttp.status === 200) {
        alert("Impreso correctamente")
    } else {
        const mensajeDeError = await respuestaHttp.text();
        alert("Error: " + mensajeDeError)
    }
}

Y así de simple es como se puede imprimir un PDF desde JS indicando el HTML para renderizar el documento.

Tips para generar PDF a partir de HTML

  • Recomiendo diseñar y ver el HTML en un navegador web y con un editor de código decente para que puedas ordenar y ver el diseño que se enviará al plugin. Una vez que estés satisfecho con el diseño, copia y pega el HTML para enviarlo al plugin
  • Al enviar el HTML al plugin, envíalo completo, desde la etiqueta <html> y no te olvides de indicar el <meta charset="UTF-8"> para que tenga la codificación correcta y, en palabras simples, puedas imprimir acentos y eñes.
  • Puedes ejecutar scripts en el HTML enviado, solo que deben ser “inline”, es decir, no debes importar los scripts de algún sitio, debes colocar el código desde el HTML.  No he probado si la importación de scripts externos funciona, y no la garantizo.
  • También puedes indicar estilos CSS con la etiqueta <style> o directamente en la propiedad style de cada elemento
  • Puedes enviar imágenes codificadas como base64
  • La fuente puede ser cambiada con el estilo CSS. A mí me gusta la Helvetica, pero todo depende de tus gustos.

Para que te des una idea, yo he podido generar, de manera programada, la siguiente nota de venta para una impresora térmica incluyendo imágenes.

El código QR que se ve ahí fue generado desde JavaScript al momento de generar el HTML, no lo generé desde la aplicación que consume al plugin.

PDF generado con HTML y plugin

¿Se puede invocar desde otros lenguajes de programación?

Puedes imprimir un PDF a partir de HTML desde cualquier lenguaje de programación que permita hacer peticiones HTTP (sin importar la herramienta usada para generar el PDF).

Cualquier lenguaje moderno puede hacerlo, por ahora se me ocurre JavaScript, PHPGolang, C#, Java, Python e incluso C con libcurl.

Lo único que tienes que hacer es una petición de tipo POST a la ruta http://localhost:8080/htmlenviando las propiedades en el cuerpo de la petición.

Nota: si tienes una aplicación en un servidor que no es local y accedes a ella a través del navegador web, será necesario usar la versión JavaScript del lado del cliente. No puedes acceder a archivos del cliente desde un servidor.

Solución de errores

Si hay algún error, el plugin te lo hará saber. Te dejo con una lista de posibles errores y su solución (aunque la misma ya está en el mismo mensaje).

Recuerda que los mensajes de error podrían variar ligeramente.

  • “fork/exec PDFtoPrinter.exe: The system cannot find the file specified.”: El ejecutable PDFtoPrinter no está en la misma ubicación que el plugin
  • “fork/exec wkhtmltopdf.exe: The system cannot find the file specified.”: El ejecutable wkhtmltopdf.exe no está en la misma ubicación que el plugin
  • Printer name “Impresora” not found or argument “Impresora” is invalid: la impresora en la que intentas imprimir no existe.
  • La lista de impresoras no carga o está vacía: no estás ejecutando el plugin, debes ejecutarlo para que se pueda cargar la lista. Asegúrate de ejecutar el plugin y después refresca la página.

Más ejemplos

En mi blog he escrito sobre cómo imprimir PDF usando este plugin. Puedes revisar los ejemplos en la siguiente categoría: Plugin PDF.

También tengo algunos ejemplos para imprimir un PDF según su ubicación local y también cómo imprimir un PDF de internet: https://parzibyte.me/blog/2020/12/07/plugin-imprimir-pdf-manera-silenciosa-javascript/

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.