Relatorio HTML Report Impressao

Impressao VUE e Boostrap

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">
<!DOCTYPE html>
<html>

  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="body_book">
        <div class="book">
          <!------------ CAPA ------------------------------------->
          <div class="page_book">
            <div class="subpage_book">
              <div class="row"> <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
              </div>
              <div class="row">
                <div class="text-center">
                  <h3>RELATÓRIO DE TESTE</h3>
                  <h3>ETAPA TESTE</h3>

                </div>
              </div>
            </div>
          </div>
          <!------------ CONTRA CAPA ------------------------------------->
          <div class="page_book">
            <div class="subpage_book">
              <table class=" table-bordered table-condensed tableSmall">
                <tbody>
                  <tr>
                    <td>
                      <div class="row ">
                        <div class="col-md-12 text-center">
                          <p>Relatório de TESTE<br>
                            Competência Nov/2023</p>
                        </div>
                      </div>
                    </td>
                  </tr>
              ...

CSS

.body_book {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;

}

.page_book {
  width: 210mm;
  min-height: 297mm;
  padding: 10mm;
  margin: 10mm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}


@media print {
  .body_book {
    width: 210mm;
    height: 297mm;
    width: 100%;
    height: 100%;
  }

  .page_book {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

.tableSmall {

  border-collapse: collapse;
  width: 100%;
  font-style: color black;
}

.tableSmall td,
th {
  border: 1px solid #dddddd;

  padding: 8px;
}