Jspdf force mon pdf à tenir sur une seule page, donc je ne vois rien dans mon pdf en fait parce qu'il y a une énorme quantité de données [veuillez jeter un œil à jsfiddle: https://jsfiddle.net/frost000/04qt7gsm/ 21 /]

var pdf = new jsPDF('p', 'pt', 'a4');
var btn = document.getElementById("btn");

btn.addEventListener('click', function() {
  pdf.addHTML(document.body, function() {
    pdf.save('test.pdf');
  });
});
.card-header {
  height: 8vh;
  background-color: #0062cc;
  color: white;
}

.card-header i {
  margin-left: 26rem;
}

.card-footer {
  height: 8vh;
}

.table td,
.table th {
  padding: 0.2rem;
  vertical-align: top;
  border: 1px solid black;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.0/jspdf.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button id="btn">Click</button>
<table id="zoneTable" class="table table-hover table-bordered">
  <thead>
    <tr>
      <th scope="col">SL#</th>
      <th scope="col">Zone-Code</th>
      <th scope="col">Zone Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td style="text-align: center;">1</td>
      <td>this is a cool zone</td>
    </tr>
  </tbody>
</table>

[vous pouvez télécharger le pdf si vous utilisez de jsfiddle, mais vous ne pouvez pas télécharger le pdf de l'extrait SO]

Regardez, ce ne sont même pas mes données réelles, ce qui est énorme.

Alors, comment puis-je afficher une grande quantité de données dans mon PDF à l'aide de JsPDF ? Aidez-moi, s'il vous plaît

[et quelqu'un s'il vous plaît dites-moi pourquoi pdf.addHTML est correct en javascript, mais ne peut pas être utilisé en tapé manuscrit? (j'ai fait tout npm installé)]

0
user12504785 1 sept. 2020 à 12:53

2 réponses

Meilleure réponse

Solution: n'utilisez pas jspdf, utilisez pdfmake [https://www.npmjs.com/package/pdfmake]

(Pourquoi devriez-vous utiliser un outil buggy alors qu'il existe un outil bien meilleur avec de meilleures fonctionnalités et un moyen plus simple de coder

Bien sûr, je comprends - aucune bibliothèque n'est parfaite à 100%. Mais certaines bibliothèques sont plus buggées que d'autres lorsque nous parlons d'une fonctionnalité ou d'un objectif spécial. Tels que: Mon cas était un tableau html en PDF au format dactylographié. J'ai essayé jspdf-autotable aussi mais pas de chance)

Mon travail est maintenant plus simple, je n'ai plus besoin d'un autre outil de capture d'écran comme html2canvas pour obtenir la capture d'écran de toutes mes tables, je n'ai plus besoin de me soucier de ma capture d'écran, du redimensionnement de l'image. De plus, j'ai un tableau réel au format PDF, ce qui signifie que je peux copier des données de mon PDF, ce n'est plus seulement une image.

Alors commençons.

Installez pdfmake:

(mon cas était installé pour Angular)

npm i pdfmake --save

code dactylographié:

Importez-le:

import pdfMake from "../../../../node_modules/pdfmake/build/pdfmake";
import pdfFonts from "../../../../node_modules/pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Fonction d'écriture:

Maintenant, écrivez simplement une fonction pour télécharger le PDF que vous souhaitez déclencher par votre bouton de téléchargement PDF

  peopleExportToPdf() {
    let docDefinition = {
      content: [
        {
          table: {
            body: [
              [{ text: 'SL#', bold: true }, { text: 'Name', bold: true }, { text: 'Age', bold: true }],
              [{ text: 'Bold value', bold: true }, 'Val 2', 'Val 3'],
            ]
          }
        }]
    }

    docDefinition.content[0].table.body.pop(); //remove the unnecessary 2nd row
    let slno: number = 1;
    for (let p of this.people) {
      docDefinition.content[0].table.body.push([{ text: slno.toString(), bold: true }, p.name, p.age.toString()]);
      slno = slno +1;
    }
    pdfMake.createPdf(docDefinition).download('Report.pdf');
  }

3 avertissement:

  1. J'ai une table qui a 3 colonnes slno, nom, âge. Concevez votre table selon vos besoins.
  2. Si vous avez un élément sans chaîne, convertissez-le en chaîne (j'ai dû convertir mon âge en chaîne, si ce n'est pas le cas, vous pourriez avoir une erreur - j'ai dû y faire face)
  3. Vous voyez, j'ai dû donner une ligne inutile, puis je l'ai supprimée. vous devrez peut-être le faire aussi (je devais le faire parce que j'ai rencontré une erreur, si vous avez trouvé une meilleure solution, veuillez la poster)

Courtoisie:

J'ai obtenu de l'aide grâce aux deux liens ci-dessous:

  1. Comment convertir un tableau html en pdf en utilisant pdfmake
  2. https://github.com/bpampuch/pdfmake/issues/1046
0
user12504785user12504785 7 sept. 2020 à 06:23

Vous devez vérifier la taille réelle de la page chaque fois que vous ajoutez du nouveau contenu, et addPage() le cas échéant:

doc = new jsPdf();
...
pageHeight= doc.internal.pageSize.height;

// Before adding new content
y = 500 // Height position of new content
if (y >= pageHeight)
{
  doc.addPage();
  y = 0 // Restart height position
}
doc.text(x, y, "value");
0
Ron 1 sept. 2020 à 09:58