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

编程问答 2022-08-13

问题描述

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，则可以下载pdf，但不能从SO代码段中下载pdf]

看这甚至都不是我的实际数据，

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

[，有人请告诉我为什么 pdf.addHTML 在JavaScript中可以使用，但在打字稿中不可用？ （我安装了所有的npm）]

解决方法

每次添加新内容时，您都必须检查实际页面大小，并在适当的情况下查看var req = new RestRequest("admin/wireless",Method.POST); req.AddQueryParameter("form","wireless_2g"); req.AddParameter("operation","read",ParameterType.GetOrPost); var res = await restClient.ExecuteAsync(req); var jdoc = JsonDocument.Parse(res.Content); var jprop = jdoc.RootElement.GetProperty("enable"); ：

jdoc.RootElement.GetProperty("enable").SetValue()
,

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

（为什么当有一个更好的工具具有更好的功能并且有更简单的编码方式时，为什么要使用越野车工具呢？

当然可以，没有一个库是100％完美的。但是，当我们谈论特殊功能或目的时，某些库比其他库更麻烦。如：我的案例是将HTML表转换为打字稿中的PDF。我也尝试过jspdf-autotable但没有运气）

我的工作现在变得更加简单，我不需要像html2canvas这样的另一个屏幕截图工具来获取我所有表格的屏幕截图，我不再需要担心屏幕截图和图像大小的调整。此外，我有一个实际的PDF表格，这意味着我可以从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',{ text: 'Age',bold: true }],[{ text: 'Bold value','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(),p.name,p.age.toString()]);
      slno = slno +1;
    }
    pdfMake.createPdf(docDefinition).download('Report.pdf');
  }

3个抬头：

  1. 我有一个表，该表具有3列slno，名称，年龄。根据需要设计表。
  2. 如果您有非字符串项目，请将其转换为字符串（我必须将年龄转换为字符串，否则，可能会出现错误-我不得不面对它）
  3. 您看到我不得不给一个不必要的行，然后将其删除。您可能还必须这样做（我必须这样做，因为我遇到了错误，如果您找到了更好的解决方案，请发布它）

礼貌：

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

  1. How to convert html table to pdf using pdfmake
  2. https://github.com/bpampuch/pdfmake/issues/1046
angularangularjavascriptjspdf-autotabletypescripttypescripttypescript

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...