8

Atualmente utilizo a biblioteca mpdf para emissão de relatórios. Porém, em alguns relatórios preciso emitir mais de 400 páginas de pdf e isto acaba demorando muito e consumindo muitos recursos do servidor.

Até verifiquei questões relacionadas a desempenho da biblioteca para tentar otimizá-la, mas nada adiantou mpdf Slow!

Então decidi criar os meus relatórios em HTML e CSS, e encontrei algumas dificuldades:

1° Vou ficar dependente de recursos (plugins e afins) do navegador para impressão em pdf.

2° Meu layout segue bem padronizado sendo um cabeçalho em todas as páginas e uma tabela com informações. Portanto preciso saber quando a informação preenche toda a folha A4 para criar uma nova página e repetir o processo.

Utilizei o salvar em PDF nativo do Google Chrome e o CutePDF Writer para emitir em pdf, mas eles possuem divergências na forma de exibição; então minha pergunta é:

Como reconhecer o limite da página?

Como melhorar a compatibilidade na impressão dos mesmos?

Exemplo do procedimento.

body {
  background: rgb(204, 204, 204);
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
  width: 21cm;
  height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;
}
@media print {
  body,
  page {
    margin: 0;
    box-shadow: 0;
  }
}
.header {
  padding-top: 10px;
  text-align: center;
  border: 2px solid #ddd;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 80%;
}
table th {
  background-color: #4caf50;
  color: white;
  text-align: center;
}
th,
td {
  border: 1px solid #ddd;
  text-align: left;
}
tr:nth-child(even) {
  background-color: #f2f2f2
}
<page size="A4">

  <div class="header">
    [nomeEmpresa]
    <br>[endereco] - [cidade] - [cep]
    <br>[cnpj] - [telefone]
    <br>
    <h3>[nomeRelatorio] -  [tipoRelatorio]</h3>
  </div>

  <table class="table">
    <thead>
      <tr>
        <th>[coluna0]</th>
        <th>[coluna1]</th>
        <th>[coluna2]</th>
        <th>[coluna3]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</page>

<page size="A4"></page>

também no: jsfiddle

4
  • Qual a dificuldade específica que está tendo? Supostamente, trabalhando com medidas exatas, seria só o caso da sua aplicação calcular a divisão dos textos antes de gerar o HTML. Para texto livre, precisa de uma certa engenhosidade, que provavelmente seria um bocado complexa para resolver em uma pergunta só. (na verdade este tipo de problema, num mundo ideal, não seria resolvido com aplicação web, que é naturalmente inferior a uma desktop, mas isso foge do escopo da pergunta :P )
    – Largato
    Commented 25/08/2016 às 13:58
  • Uma possível solução é você ver o tipo de fonte que vai usar e "eleger" um número predeterminado de linhas por página. Se usar uma monospace, é perfeitamente calculável o espaço que o texto ocupa, sacrificando um pouco da estética em prol da previsibilidade da saída. Aí as quebras seriam gerenciadas na aplicação server-side. Em fontes não proporcionais dá pra fazer, mas tem que dar uma margem de erro razoável, e ter as medidas dos caracteres no servidor para fins de cálculo. É um bocado mais trabalhoso. O CSS em teoria teria previsto alguns recursos, mas só "funcionam em teoria" :) mesmo.
    – Largato
    Commented 25/08/2016 às 14:02
  • @Bacco pensei em fazer desta forma porém alguns textos se apresentaram maiores e passaram do tamanho, a fonte monospace poderia resolver este problema? Commented 25/08/2016 às 14:07
  • Só com CSS não. Seria o caso de usar monospace, e contar os caracteres na aplicação server-side. Quando chegar em determinada quantidade, fecha a página e abre a próxima. Se todas as linhas forem mais curtas que a largura é até mais simples, basta contar por linha. Mas se vai ter parágrafos, aí ja precisa elaborar melhor.
    – Largato
    Commented 25/08/2016 às 14:21

2 Respostas 2

5

Você pode partir para qualquer uma das alternativas abaixo. Depende de quão preciso precise ser.

Método 1

O que eu costumo fazer em projetos pessoais e que não requerem muita precisão, é definir a o tamanho da fonte em 12pt para o html em meu CSS por valer 100% do tamanho. Converto então o tamanho de uma folha A4 comum de milímetros (210 x 297) para pixels (793 x 1122, aproximadamente). Assim, defino um <div> com as dimensões da folha e outro <div> para servir de isolador e colocar o conteúdo: cada informação poderá ter seu tamanho de fonte que não irá modificar as dimensões do <div> que representaria o papel A4 comum (não o A4 ofício). Adicione margem conforme necessário.

Devo dizer que funciona para mim, principalmente com fonte mono-espaçada. Veja um exemplo:

html { font-size: 12pt; }

.folha { background-color: #ccc; padding: 0.5em; }
.a4_vertical { width: 793px; height: 1122px; }
.a4_horizontal { width: 1122px; height: 793px; }
<div id="folha-a4" class="folha a4_vertical">
   <div id="conteudo">
       Folha A4
   </div>
</div>

Método 2

Se quer mais precisão, recomendo utilizar o Paper CSS que tem a licença MIT. Para usar, basicamente você precisa...

... No <header>

  • Carrega o estilo: <link rel="stylesheet" href="dist/paper.css">
  • Define o tamanho do papel: <style>@page { size: A5 }</style>

... No <body>

  • Adiciona a classe do tamanho do papel (A4)
  • Adiciona se quer em formato paisagem (landscape) - retrato é padrão
  • Na tag (<div>, <section>, et cetera) que terá todo o conteúdo de uma folha, adicione a classe sheet. Cada folha é um sheet diferente!

Existem outros pormenores que podem ser aprendidos conforme a necessidade. Também existem vários exemplos no site. Segue um adaptado:

<link href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css" rel="stylesheet" />
<style>
  @page {
    size: A4
  }
</style>

<body class="A4">

  <section class="sheet padding-10mm">

    <article>Exemplo de folha A4</article>

  </section>

</body>

Vale ressaltar que é possível gerar PDF com o electron-pdf, conforme a página do projeto informa. Acredito que use menos recursos.

2
  • Sei que tem muito tempo, mas estou tentando utilizar essa solução da resposta, e funciona, mas não de primeira, utilizei ela para abrir um arquivo em formato de folha A4, no entanto primeiramente aparece com o html ocupando o espaço em 100% e só depois de mexer na página, clicar ou coisa do tipo que ela atualiza e vai para forma de A4. Sabe o que poderia ser? Commented 21/05/2020 às 17:23
  • 1
    @GabrielSilva Eu não havia visto sua pergunta, desculpe-me. De qualquer modo, poderia fazer a pergunta formalmente e detalhar? Pois não sei se entendi exatamente o que ocorreu. Fazendo a pergunta, você me marca aqui no comentário com o link da pergunta para que eu veja se consigo te auxiliar a entender o problema.
    – José
    Commented 22/11/2021 às 4:31
1

Se você já sabe quantos itens cabem por página ou quer arbitrariamente designar quando uma página deve ser quebrada você pode utilizar o page-break-after ou page-break-before relacionado há um elemento da sua página, como um por exemplo. No seu caso, talvez, poderia ser a própria tag

@media print { page {page-break-after: always;} }

Fonte: http://www.w3schools.com/cssref/pr_print_pageba.asp

Referências: https://css-tricks.com/almanac/properties/p/page-break/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .