How to change page footer size with @media print

Question

I am creating a system that would be for financial management, and within that system I thought of generating reports too, but I did not give account of generating the pdf by php, because it was very heavy and took a little, then 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 the report pages showing the system logo, but I’m having difficulty because the data shown in the table often overlaps the footer, and 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 tested with all possible solutions, but even so, the footer always gets bugged one way or another.

Thank you!

Answer 1

Man I needed to change little thing on @page for the footer to tidy up. Note that I have set a marked value just for you to view 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.

OBS: There’s more css stuff to pack there, even in the css outside the @media print , but I’ll leave it up to you blz. qq doubt is just talk