jspdf 强制 pdf 放在一个地方，但我的 pdf 数据量非常大，因此在一页中几乎看不到

Question

Jspdf 强制我的 pdf 适合一页，所以我实际上在我的 pdf 中看不到任何东西，因为有大量数据 [请查看 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>

[如果你使用jsfiddle可以下载pdf，但是你不能从SO snippet下载pdf]

你看这还不是我的实际数据，这是一个巨大的数字。

那么如何使用 JsPDF 将大量数据显示到我的 pdf 中？请帮助我

[ 有人请告诉我为什么 pdf.addHTML 在 javascript 中没问题但在打字稿中不可用？（我安装了所有 npm）]

Answer 1

您每次添加新内容时都必须检查实际页面大小，并且addPage()在适当的地方：

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");

Answer 2

解决方案：不要使用jspdf，使用pdfmake [https://www.npmjs.com/package/pdfmake]

（当有更好的工具具有更好的功能和更简单的编码方式时，为什么要使用有缺陷的工具

当然，我明白了 - 没有图书馆是 100% 完美的。但是当我们谈论一个特殊的功能或目的时，一些库比其他库更容易出错。如：我的案例是 html table to PDF in typescript。我也试过 jspdf-autotable 但没有成功）

我的工作现在更简单了，我不需要像 html2canvas 这样的其他截图工具来获取我所有 table 的截图，我不再需要担心我的截图了，image调整大小。此外，我有一个 PDF 格式的实际 table，这意味着我可以从我的 PDF 中复制数据，它不再只是一个图像。

让我们开始吧。

安装pdfmake：

（我的案例是为 Angular 安装的）

npm i pdfmake --save

打字稿代码：

导入：

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

写入函数：

现在只需编写一个要通过 PDF 下载按钮触发的下载 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 个单挑：

我有一个 table，它有 3 列 slno、name、age。根据您的需要设计您的table。
如果您有 non-string 项目，请将其转换为字符串（我必须将我的年龄转换为字符串，否则您可能会遇到错误 - 我不得不面对它）
你看我不得不给出一个不必要的行然后将其删除。你可能也必须这样做（我不得不这样做，因为我遇到了错误，如果你找到了更好的解决方案，请 post 它）

礼貌：

我从以下两个链接获得了帮助：

How to convert html table to pdf using pdfmake
https://github.com/bpampuch/pdfmake/issues/1046

jspdf 强制 pdf 放在一个地方，但我的 pdf 数据量非常大，因此在一页中几乎看不到

jspdf forces pdf to fit in one place, but my pdf has a very large amount of data so it is barely visible in one page

javascript

jspdf

typescript

jspdf-autotable

angular