Changing the page footer size with @media print

0

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!

    
asked by anonymous 30.05.2018 / 18:03

1 answer

0

Dude I needed to change a little thing in @page for the footer to fix. Notice that I put a large amount of value just to see you 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 fix there, even in css out of @media print , but I'll leave it on your blz account. QQ doubt is just to speak

    
30.05.2018 / 20:07