Convert HTML to PDF Using JavaScript HTML2PDF.js Library

Install html2pdf Library

Add html2pdf library in your code using CDN.

<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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div id="canvas_div_pdf">

<!--Add HTML content you want to convert to PDF-->
<p>hello this is a paragraph</p>

<table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>
<script>

 var element = document.getElementById('canvas_div_pdf');
html2pdf(element);
</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.

html2pdf(element, {
  margin:       10,
  filename:     'myfile.pdf',
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { scale: 2, logging: true, dpi: 192, letterRendering: true },
  jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
});

Output Screenshot

HTML to PDF Using JavaScript HTML2PDF.js Library Screenshot

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.