I'm creating a system that would be for financial management, and within that system I thought of generating reports as well, but I did not realize generating the pdf by php, because it was very heavy and took a while, so I had the idea send report data via json and print with 'ctrl + p' by the browser itself.
I need to leave a footer fixed on all pages of the report showing the system logo, but I'm having difficulty because the data shown in the table often overlaps the footer, and buga the print layout.
HTML code
<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>
I'm using the vuejs framework.
css code:
.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;
}
}
And the final result looks more or less like this
I have tested with all possible solutions, but even so, the footer always gets bugged one way or another.
Thank you!