1

Estou criando um sisteminha que seria para gestão financeira, e dentro desse sistema eu pensei em gerar relatórios também, mas eu não dei conta de gerar o pdf pelo php, pq ficava muito pesado e demorava um pouco, daí tive a ideia de enviar os dados do relatório via json e imprimir com 'ctrl + p' pelo próprio navegador.

Eu preciso deixar um rodapé fixo em todas as páginas do relatório mostrando a logo do sistema, mas estou tendo dificuldade pq os dados mostrados da tabela muitas vezes se sobrepõe ao rodapé, e buga o layout de impressão.

Código HTML

<table>
      <thead>
        <tr>
          <th>Nome</th>
          <th>CNPJ</th>
          <th>Cidade</th>
          <th>Estado</th>
          <th>Criado</th>
        </tr>
      </thead>
      <tbody>
        <tr class="page-break" v-for="(voto, val) in relatorio" :key="val">
          <td>{{voto.nome}}</td>
          <td>{{voto.cnpj}}</td>
          <td>{{voto.cidade}}</td>
          <td>{{voto.estado}}</td>
          <td>{{voto.created}}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="rodapeImpressao print">
          <td colspan="5">
            <img src="../assets/grande.svg" alt="Logo" width="100px">
          </td>
        </tr>
      </tfoot>
    </table>

Estou usando o framework vuejs.

Código css:

.rodapeImpressao {
  position: fixed;
  bottom: 11px;
  width: 100%;
  border-top: 1px solid black;
}
.rodapeImpressao img {
   position: fixed;
  left: 45%;
  bottom: 0px;
}
@media print {
  @page {
    margin: 0.4cm 0.1cm 0.04cm 0.1cm;
    counter-increment: page;
    @bottom-center {
      content: "Page " counter(page);
    }
  }
  table {
    font-size: 8pt !important;
    page-break-after: always;
    page-break-before: always;
    width: 100% !important;
  }
  table tbody {
    position: absolute;
    top: 130px;
  }
  * {
    background:transparent !important;
    color:#000 !important;
    text-shadow:none !important;
    filter:none !important;
     -ms-filter:none !important;
  }

  body {
    margin:0;
    padding:0;
    line-height: 1.4em;
  }
}

E o resultado final fica mais ou menos assim Relatório gerado

Eu já testei com todas as possíveis soluções, mas mesmo assim, o rodapé sempre sai bugado de um jeito ou de outro.

Obrigado!

2

1 Resposta 1

1

Cara eu precisei mudar pouca coisa no @page para o rodapé arrumar. Repare que coloquei um valor acentuado apenas para vc visualizar melhor.

  @page {
    size: A4;  
    margin: 70pt 60pt 170pt;
    counter-increment: page;
    @bottom-center {
      content: "Page " counter(page);
    }
  }

Com a config acima consegui esse resultado.

inserir a descrição da imagem aqui

OBS: Tem mais coisa de css para arrumar ai, até mesmo no css fora do @media print , mas vou deixar isso por sua conta blz. Qq dúvida é só falar

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 .