Imprimir

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div id="printMe" class="A4">

  <div class="page_header">
    <img src="" width="150px">
  </div>
  <div class="titulo_central" style="">
    <h3>RELATĂ“RIO DE CONFORMIDADE FISCAL</h3>
    <h3>ETAPA 99999 - CSC | DISPONIBILIDADE DA </h3>
    <h3>RT9999/23</h3>
  </div>

  <div class="page_footer" style="border: 1px solid black;border-collapse: collapse;">

    <table>
      <tbody>
        <tr>
          <td>Recebido em: ___/___/____</td>
        </tr>
        <tr>
          <td>Ass: _________________________</td>
        </tr>
        <tr>
          <td>FRTOS</td>
        </tr>
        <tr>
          <td>MEN - TEN</td>
        </tr>
        <tr>
          <td>Fiscal - Contrato 2022</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="d-flex gap-2 justify-content-center py-5">
    <button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
    <button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button>
    <button class="btn btn-success rounded-pill px-3" type="button">Success</button>
    <button class="btn btn-danger rounded-pill px-3" type="button">Danger</button>
    <button class="btn btn-warning rounded-pill px-3" type="button">Warning</button>
    <button class="btn btn-info rounded-pill px-3" type="button">Info</button>
    <button class="btn btn-light rounded-pill px-3" type="button">Light</button>
    <button class="btn btn-dark rounded-pill px-3" type="button">Dark</button>
   ...

CSS

#printMe {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;

}

.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
}

.page_header {
  position: flat;
  top: 0;
}

.page_footer {
  position: relative;
  width: 30%;
  left: 70%;
  top: 70%;
}

.titulo_central {
  top: 400px;
  width: 600px;
  left: 20%;
  text-align: center;
  position: relative;
}


@media print {
  .area_printer {
    background: white;
    margin: 0;
    box-shadow: 0;
  }
}

JavaScript

function printDiv(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;

}