Install html2pdf Library
Add html2pdf library in your code using CDN.
HTML
x
1
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>HTML to PDF Using JavaScript Code
index.html
HTML
1
40
40
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">2
<div id="canvas_div_pdf">3
4
<!--Add HTML content you want to convert to PDF-->5
<p>hello this is a paragraph</p>6
7
<table class="table table-dark">8
<thead>9
<tr>10
<th>Firstname</th>11
<th>Lastname</th>12
<th>Email</th>13
</tr>14
</thead>15
<tbody>16
<tr>17
<td>John</td>18
<td>Doe</td>19
<td>john@example.com</td>20
</tr>21
<tr>22
<td>Mary</td>23
<td>Moe</td>24
<td>mary@example.com</td>25
</tr>26
<tr>27
<td>July</td>28
<td>Dooley</td>29
<td>july@example.com</td>30
</tr>31
</tbody>32
</table>33
34
</div>35
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>36
<script>37
38
var element = document.getElementById('canvas_div_pdf');39
html2pdf(element);40
</script>You can also pass the custom options to the html2pdf library as shown below. It will add custom margin to the pdf document and also pass the filename and also pass the html2canvas and jspdf library.
JavaScript
1
7
1
html2pdf(element, {2
margin: 10,3
filename: 'myfile.pdf',4
image: { type: 'jpeg', quality: 0.98 },5
html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true },6
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }7
});Output Screenshot
