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.
Para este tutorial vas a necesitar contar con:
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/latestPDFtoPrinter.exe
el cual se descarga en: https://mendelson.org/pdftoprinter.html o en https://github.com/emendelson/pdftoprinter/blob/main/PDFtoPrinter.exe?raw=truewkhtmltopdf.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.
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.
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.
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.
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:
html
: la cadena HTML para generar el PDF.nombreImpresora
: una cadena indicando el nombre de la impresora en donde el PDF será impresoserial
: cadena opcional si quieres apoyar al desarrollo del software, absolutamente opcionalancho
: número indicando el ancho de la página en milímetrosalto
: número indicando el alto de la página en milímetrosmargenDerecho
: número indicando el margen derechomargenIzquierdo
: número indicando el margen izquierdoVeamos 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.
<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.<style>
o directamente en la propiedad style
de cada elementoPara 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.
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, PHP, Golang, 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/html
enviando 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.
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.
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/
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.