1:07 0 2
Imprimir directo sin vista previa con JAVASCRIPT

Imprimir directo sin vista previa con JAVASCRIPT

  DrUalcman |  agosto 122020

Bueno, el problema que intento resolver hoy es un poco complejo, y tiene muchas formas diferentes de solucionarse. Intentaré abordar todas las que pueda, y dependiendo de qué es lo que necesites podrás utilizar una u otra.

Pasemos primero a describir exáctamente que es lo que necitamos. El escenario es el siguiente: Tenemos una aplicación basada en WEB en la que necesitamos imprimir directamente a una impresora preconfigurada sin que el usuario interactue en la acción, sólo, por ejemplo, create un recibo, o una órden de trabajo, o cualquier documento que se generará e imprimirá de forma automática cuando el usuario realice una determinada acción.

Las Opciones

  • Utilización del modo Kiosko en exploradores que lo soporten como los basados Chromium
  • Librerías JAVASCRIPT muy curradas como Print.js 
  • Utilización de una aplicacion de escritorio que facilice un servidor web para comunicar con las impresoras. Sobre esta opción trataremos mas en profundidad en este blog.
* No es 100% necesario habilitar el modo Kioski para poder utilizar esta funcionalidad.


Habilitar modo Kiosko

Esta es la solución más básica que tendríamos para comenzar a silenciar la impresión. Es decir, que no nos abra el cuadro de diálogo imprimir. Pero esto presuponer que siempre vamos a imprimir en la impresora predeterminada del sistema. Por lo que puede ser una solución siempre que no se necesite imprimir en diferentes impreoras dependiendo del tipo de documento a imprimir.

En nuestro ejemplo vamos a user Google Chrome para los pasos, pero debe de ser muy parecido en todos los navegadores basado en Chromium. Mira la dodumentación del navegador que vas a utilizar para ver como poder habilitar esta función.

  1. Crear un acceso directo de Google Chrome en el escritprio
  2. Ir a la ventana de Propiedades
  3. En la pestaña de Acceso Directo inmediatamente después de la ruta escribiremos - -kiosk-printing
  4. Si lo deseamos también podemos escribir la ruta de la página web que se abrirá cuando hagamos doble click. Después o antes del parámetro anterior escribiremos la ruta de la página que deseamos que se abra en modo Kiosko
  5. Adicionalmente podemos desabilitar los PopUps desde Configuración/Avanzadas/Privacidad y Seguridad/Ventanas Emergentes (PopUps) cambiar la opción de Bloquear a OFF Desabilitado

Con estos sencillos pasos podemos habilitar el modo Kiosko en Google Chrome.

Librería Print.js

La verdad que esta librería esta muy currada. Me gustó bastante cuando la probé, pero no es exáctamente lo que andamos buscando. Es una buena solución para preparar documentos e imprimirlos, o para incluso, abrir documentos directamente en el explorador, pero luego requiere que el usuario interactue con el cuadro de diálogo de impresión.

Prero si unimos esta librería con la solución de Kiosko pues puede ser una gran alternativa.

Crear un servidor web para la impresión desatendida

Bueno, ahora ya un poco más de programación, que es a lo que nos dedicamos, y para lo que esta didicado realmente este blog. Esta sería la solución más avanzada y con la que tendríamos un poco más de "control" o "posibilidades". Al mismo tiempo es la que más tiempo lleva para realizarse.

Todo pasa por crear una aplicación, normalmente de consola, en la que habilitaremos un pequeño servidor web, desde el cual, podremos imprimir, utilizando todas las herramientas de programación y de nuestro sistema operativo, en la rimpresora qeu deseemos. Esto abre la posiblidad de, desde la aplicación web, poder enviar a imprimir en diferentes impresoras.

Ventajas

  • Personalizar la solución exactamente a lo que necesitamos
  • Control dónde, cuando, cuánto y cómo imprimir
  • Control del código fuente
  • No utilización de librerías de terceros

Desventajas

  • Ejecutar la aplicación de consola independientemente del navegador
  • Más recursos necesarios en la máquina cliente

En otro blog voy a detallar cómo hacer el servidor y cómo usarlo. Pero podéis acceder al código en mi GitHub espero que lo entendáis sin problema.

Posibilidades que nos ofrece el servidor web de impresión

Antes de iniciar la web debemos de estar seguros que nuestra aplicación de consola se ha abierto, y que está en ejecutandose en modo Administrador, si no es posible que no funcione. Luego debemos terner instaladas todas las impresoras que vamos a utilizar, y finalmente podemos ejecutar nuestra aplicación WEB.

Como presupongo que es una tulidad para ser ejecutada en una red local, no desde internet, en nuestra aplicación tendremos un JAVASCRIPT que realice una llamada por GET o POST a nuestro servidor local, que de froma predeterminada estará en:

http://localhost:8888

Y le indicaremos los siguiente parámetros:

Printer = Nombre de Impresora
URL o FILE = Dirección url del documento a imprimir, o la ruta completa de dónde se encuentra el archivo a imprimir en nuestra máquina
Count = Opcional. Indica el número de copias que se desea imprimir.

Si lo estamos enviando en modo POST podremos crear un JAVASCRIPT tal que así:

//post data
var data = new FormData();
data.append(""printer"", ""[printer name]"");
data.append(""url"", ""[url with a document to print]""); //if url not send path

POST('http://localhost:8888/, function (data) {
console.log(data);
}, function (error) {
console.log(error);
}, data);

Si lo estamos enviando en modo GET podemos crear una llamda tal que así:

http://localhost:8888?printer=[printer name]&url[url file to print]

Podemos hacer la combinación de GET y POST para, por ejemplo, lo que es la impresora se la enviamos desde GET y el resto de opciones por POST ya que son las que en un principio serían de forma dinámica, dependiendo de la sección del usuario. La impresora dependerá de la configuración del pues de trabajo desde la base de datos o desde el fichero de configuración que estemos utilizando para definir sobre que impresora deseamos imprimir. Este sería un ejemplo de combinación:

        var data = new FormData();
data.append("url", "http://localhost/dat/Error.pdf");

function POST(url, success, error, data) {
let xhr; //control compatibilities
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
let type = "POST";
let content = "application/json; charset=utf-8";
xhr.open(type, url, true);
xhr.setRequestHeader("Content-Type", content);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status <= 299) {
if (success !== undefined && success !== null) ExternalFunc(success, dat);
}
else {
if (error !== undefined && error !== null) ExternalFunc(error, xhr.statusText);
}
};
xhr.onerror = function (e) {
console.error(e);
if (error !== undefined && error !== null) ExternalFunc(error, e);
};
xhr.ontimeout = function (t) {
console.error(t);
if (error !== undefined && error !== null) ExternalFunc(error, t);
};
if (data === null || data === undefined || data === '') xhr.send();
else xhr.send(data);
}

POST('http://localhost:8888/?printer=Microsoft Print to PDF', function (data) {
console.log(data);
}, function (error) {
console.log(error);
}, data);

Conclusiones

Bueno, espero haber aclarado dudas. Como siempre podeis acceder a toda la información que he leido para poder realizar este blog.

Happy Coding

#CSHARP, #javascript, #CORE, #web

Para descargar el archivo con el servidor web se agradece una donación voluntaria de la cantidad que desee. Haz click en el botón donar.

2 Comentarios

    • Jaume
      jueves, 30 de noviembre de 2023 9:28

      Seria posible utilizar para un navagedor android ? o conoces alguna manera?

    • Juan Arcila
      miércoles, 13 de octubre de 2021 13:46

      Impresionante tu solución, muchas gracias por compartirla! Estamos probando para ver si podemos implementarla y una vez veamos que todo va bien seguro va tu donación. Una pregunta: en la librería que se monta el websock solo está disponible imprimir un archivo, pero si quisiéra imprimir solo texto directo, crees que se pueda?

 
 
 

Archivo