javascript angular typescript jspdf jspdf-autotable

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

Jspdf is forcing my pdf to fit in one page, so I can't see anything in my pdf actually because there are a huge amount of data [ please have a look at 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>

[ you can download pdf if you use from jsfiddle, but you can't download pdf from SO snippet]

Look this is not even my actual data, which is a huge amount.

So how can I display large amount of data to my pdf using JsPDF? please help me

[ and someone please tell me why pdf.addHTML is fine in javascript but not usuable in typescript? (i did all npm installed) ]

Solution

Solution : Do not use jspdf, use pdfmake [https://www.npmjs.com/package/pdfmake]

(Why should you use a buggy tool when there is a far better tool out there with better features and has a easier way to code

Of course, I get it - no library is 100% perfect. But some library is more buggier than others when we talk about a special feature or purpose. Such as : My case was html table to PDF in typescript. I tried jspdf-autotable also but no luck)

My work is now more simple, I don't need another screenshot tool like html2canvas to get all my tables screenshot, I no longer need to worry about my screenshot anymore, image resizing. Furthermore, I have an actual table that is in PDF, which means I can copy data from my PDF, its not only an image anymore.

So lets begin.

Install pdfmake:

(my case was install for Angular)

npm i pdfmake --save

typescript code:

Import it:

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

Write function:

Now just write a function for download PDF that you want to trigger by you PDF download button

  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 heads up:

I have a table that has 3 columns slno, name, age. Design your table according to your need.
If you have a non-string item, convert it to string (I had to convert my age to string, if you don't you might have an error - I had to face it)
You see I had to give an unnecessary row then removed it. you might have to do it also (I had to because I faced error, if you have found a better solution please post it)

Courtesy:

I got help from the two links below: