How to change page footer size with @ media print
I'm creating a little system that would be for financial management, and within this system I thought to generate reports too, but I did not realize to generate the pdf by php, because it was very heavy and took a while, so I had the idea to send the report data via json and print with 'ctrl + p' by the browser itself.
I need to leave a fixed footer on all report pages showing the system logo, but I am having difficulty because the data shown table often overlaps the footer, and bugs 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 end result looks something like this
I have already tested with all possible solutions, but even so, the footer always comes out buggy one way or another.
Thank you!
1 answers
Dude I needed to change little thing in @page
for footer tidy up. Notice that I put a sharp value just for you to visualize better.
@page {
size: A4;
margin: 70pt 60pt 170pt;
counter-increment: page;
@bottom-center {
content: "Page " counter(page);
}
}
With the above config I got this result.
Note: has more css stuff to tidy up ai, even in css outside of @media print
, but I'll leave that to you blz. QQ doubt is just talking