DEV Community

Danilo Machado
Danilo Machado

Posted on • Edited on

12 2

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

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.

qz sem licença

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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"


Enter fullscreen mode Exit fullscreen mode

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;

gerando key

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);

12) Depois disso tudo, os pop-ups do QZ irão parar de aparecer e você irá conseguir imprimir sem problemas;

13) Não esqueça de dar uma olhada na documentação do QZ, pois lá tem todas as configurações e opções de impressão;

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more