(Reactive) UltimatePDF Troubleshooting (⭕️ Outsystems)

Oi seus lindos, hoje eu vim falar um pouco do componente Ultimate PDF, ele é bastante usado em projetos e bem difundido na comunidade. Contudo tivemos alguns problemas com ele e tivemos que contornar de uma forma criativa, o famoso WorkAround. Sem muitas delongas vamos aos dois problemas que geraram uma dor de cabeça.

WorkAround Mode ON

Issue Número 1

Existia uma Screen Linda, que imprimia um PDF em formato de documento, e esse documento era um pouco complexo (hehehe) devido a quantidade de informações. Nele existia algumas tabelas e elas estavam sendo quebradas na hora da impressão conforme imagem abaixo, e isso não era legal.

Solution Número 1

Apesar do documento ter informações dinâmicas ele tinha um tamanho fixo, e com base nisso utilizamos um pouco do nosso conhecimento frontend para resolver essa questão, então basicamente resolvemos o problemas em dois pequenos passos :

Passo 1 — Criar Classe Css para quebra de Página

O browser é capaz de customizar as páginas html para impressão com alguns selector do css, o Ultimate PDF utiliza isso em blocos, são eles PageBreak e AvoidPageBreak.

Basicamente esse blocos utilizam os selectors : page-break-before(quebra antes do elemento), page-break-after (quebra depois do elemento) e page-break-inside (evita quebra dentro de elementos < pre > e < blockquote > ).

Contudo, eu não gosto de usar blocos que inclui divs vazias para adicionar funcionabilidades a minha página então preferi adicionar o selector direto na minha folha de estilo (poderia usar o do próprio Ultimate PDF, porém sou orgulhoso heheheh ) .

Passo 2 — Adicionar a Classe Css para quebra Páginas

Depois que criamos a classes é hora de adiciona-lá em determinados lugares para obiter uma quebra mais assertiva do documento.

Não utilizei a opção avoid, por que ele não garante a quebra segundo documentação do W3School.

Issue Número 2

O segundo problema, o buraco foi mais embaixo, porque até agora procuramos uma maneira melhor de lidar com essa situação.

O Ultimate PDF possui uma server action para geração de PDF que retorna um binário, até ai tudo tranquilo. O problema é que, gerando o PDF através dessa server action o header e footer que eram fixos, eles se moviam ou o texto não respeitava as margens fazendo que a impressão não ficasse nada legal.

Solution Número 2

Percebemos que a visualização do PDF pelo browser sempre se compartava corretamente, enquanto a server action quebrava tudo. Então, movemos essa geração de PDF do modulo do Core para a camada User acima e geramos novamente o pdf em um endpoint de download e vua-lá, funcionou.

Não chegamos a analisar a fundo, mas acréditamos que o código tem algum tipo de otimização quando a esse chamada que permitiu solucionar o problema.

Sei que não ficou muito claro, mas como diria Socratés : Só sei que nada sei. Então, até o dia que descobrir uma solução mais refinada essa vai me servir bem xD.

Conclusão

Nem tudo são flores, as vezes soluções alternativas são necessárias para que possamos sobreviver mais um dia. Contudo devemos seguir em frente e continuar evoluindo nosso código e desenvolvimento, para que possamos lidar com essas situações atípicas de forma a não sofrer muito.

Escrevi esse artigo, para me lembrar de um dia escrever um outro com uma solução melhor e clara ou caso alguém assim se deparar com essas situações incomum. (Se você tiver uma alternativa melhor, por favor me diz seu lindo, ajuda nóis )

Eiiiii me ajuda ai vai !? deixa uma palminhaaaa 👋🏻 e clica em seguir para mais conteúdos legais.