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 Report generated

I have already tested with all possible solutions, but even so, the footer always comes out buggy one way or another.

Thank you!

Author: Otavio, 2018-05-30

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.

insert the description of the image here

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

 0
Author: hugocsl, 2018-05-30 18:07:39