0

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) ]

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459

3 Answers3

0

you have to check the actual page size every time you adding new content, and addPage() where appropriate:

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");
Ron
  • 5,900
  • 2
  • 20
  • 30
  • can you edit my js so that I can understand, I am new to this –  Sep 01 '20 at 10:08
  • If we write the whole thing, where would your effort be? There are enough comments in the code, so you can try to implement this yourself.. and learn a lot while trying.. – Ron Sep 01 '20 at 10:23
  • look whole thing is written in my js file, u just add ur height condition. i don't understand ur y = 500 // Height position of new content if (y >= pageHeight) these lines –  Sep 01 '20 at 10:59
  • i didnt need to use any height –  Sep 01 '20 at 10:59
  • When you add new content, you specify the offset or height from where y=0.. 500 is just an example, your next line could be 550, or 600 ... and depending on your fonts and sizes, you decide where it is appropriate to start a new page, and reset the y=0 – Ron Sep 01 '20 at 11:01
  • if you are adding the whole body of your HTML, you cannot control the pagination of pages, which is what you are trying to solve here.. what you need will not happen with 4 lines of code :) You need to extend your logic to get the desired result – Ron Sep 01 '20 at 11:02
0

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:

  1. I have a table that has 3 columns slno, name, age. Design your table according to your need.
  2. 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)
  3. 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:

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

If you've a large column of data try this code, you can adjust the width of pdf according to your mat-table data. Hope this will help someone. First

import autoTable from 'jspdf-autotable'; import jsPDF from 'jspdf';

 downloadpdf() {
const doc = new jsPDF('l', 'pt', [3400, 3000]); //here you can adjust pdf width by changing the two respective values 
;
autoTable(doc, {
  html: '#my-table', //your table ID here
  columnStyles: {
 //   0: { cellWidth: 100 },
    //1: { cellWidth: 200 },
  //  2: { cellWidth: 200 },
  }
});
doc.save('my_table.pdf')

}

Soy Diabs
  • 122
  • 2