JSFiddle - React, Tailwind, and code Playground

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">
<button class="btn" id="btnPrint" onclick="imprimir()">Imprimir</button>
<page size="A4">

  <div class="header">
    [nomeEmpresa]
    <br>[endereco] - [cidade] - [cep]
    <br>[cnpj] - [telefone]
    <br>
    <h3>[nomeRelatorio] -  [tipoRelatorio]</h3>
  </div>

  <table class="table">
    <thead>
      <tr>
        <th>[coluna0]</th>
        <th>[coluna1]</th>
        <th>[coluna2]</th>
        <th>[coluna3]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</page>

<page size="A4"></page>

CSS

body {
  background: rgb(204, 204, 204);
}
page {
  background: white;
  display: block;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  margin: 30px 30px 50px 30px;
}


@media print {
  body,
  page {
    margin: 0;
    box-shadow: 0;
    margin: 30px 30px 50px 30px;
  }
}
.header {
  padding-top: 10px;
  text-align: center;
  border: 2px solid #ddd;
}

JavaScript

function imprimir() {
  window.print()
}