QZ Tray: Impressão em impressoras térmicas pelo navegador com Javascript

#javascript #webdev #print

Neste artigo irei abordar a melhor maneira de imprimir em impressoras térmicas direto pelo navegador.

A solução do QZ é utilizada pela grande maioria de softwares do ramo de cardápio digital no Brasil.

Apesar do QZ vender licenças para domínios, ele é um open sourcer. Ou seja, precisamos alterar o código fonte do QZ e compilar novamente, de acordo com o nosso domínio.

1) Você pode realizar os testes direto no demonstrativo do QZ;

2) Ao realizar os testes, você verá os pop-ups do QZ aparecendo igual na imagem abaixo, informando sobre a licença. Por isso precisaremos recompilar o QZ com seu novo certificado.

3) Recomendo realizar o download do JDK 7 ou superior, Apache Ant e Open SSL;

4) Faça o clone do repositório do QZ Tray no github;

5) Gere o certificado ssl com o Open SSL;



openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 11499 -nodes

OBS: quando perguntar o dominio, colocar o curinga, ex: *.seusite.com.br

6) Gere a private key usando o certificado ssl;



openssl pkcs12 -inkey key.pem -in cert.pem -export -out privateKey.pfx

7) Coloque o arquivo key.pem gerado anteriormente na pasta do tray-master, na raíz, que foi clonado do github;

8) Agora, precisamos compilar o QZ com o Apache Ant, mas antes, lembre-se;

8.1) Depois de baixar o Apache Ant, coloque a pasta na variável de ambiente;



- ANT_HOME=caminho
- Path=[]caminho

8.2) Rodar o comando para compilar de acordo com seu sistema operacional;



// win
ant nsis -Dauthcert.use="key.pem"

// linux
ant makeself -Dauthcert.use="key.pem"

// mac
ant pkgbuild -Dauthcert.use="key.pem"

9) Depois de compilado, abrir QZ em /tray-master/out/dist/qz-tray.jar e clicar em "+", pra gerar o certificado, será gerado o digital-certificate.txt e private-key.pem, copie os 2 e coloque no seu servidor, pro sistema poder utilizar os certificados;

10) E quando for usar o QZ no seu website, basta utilizar os certificados gerados;

	qz.security.setCertificatePromise(function (resolve, reject) {
	$.ajax({
	url: `https://seusite.com.br/digital-certificate.txt`,
	cache: false,
	dataType: "text"
	}).then(resolve, reject);
	});

	qz.security.setSignaturePromise(function (toSign) {
	return function (resolve, reject) {
	$.post(`https://seusite.com.br/sign-message.php`, {
	request: toSign,
	dataType: "text"
	}).then(resolve, reject);
	};
	});

view raw qz_tray.js hosted with ❤ by GitHub

11) E o seu arquivo sign-message.php pode ser montado da seguinte forma;

	<?php
	header('Access-Control-Allow-Origin: *');
	header("Access-Control-Allow-Headers: Origin, Cookie, Accept-Language, Cache-Control, X-Requested-With, Content-Type, Accept, Authorization, X-Api-Key");
	header("Access-Control-Allow-Methods: GET, PUT, POST, DELETE, PATCH, OPTIONS");
	header("Access-Control-Allow-Credentials: true");
	if (!empty($_SERVER["REQUEST_METHOD"]) && $_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
	exit();
	}

	$KEY = 'private-key.pem';

	$req = $_POST['request'];
	$privateKey = openssl_get_privatekey(file_get_contents($KEY));

	$signature = null;
	openssl_sign($req, $signature, $privateKey, "sha1");

	if ($signature) {
	header("Content-type: text/plain");
	echo base64_encode($signature);
	exit(0);
	}

	echo '<h1>Error signing message</h1>';
	http_response_code(500);
	exit(1);