Languages
[Edit]
EN

JavaScript - convert HTML to PDF

6 points
Created by:
Niac
478

In this short article we would like to show how to convert HTML to PDF using html2pdf library in JavaScript.

The article is focused about:

  • whole web page conversion into PDF document,
  • selected element conversion into PDF document.

Check below runnable examples to see how it works.

Whole webpage to PDF conversion

In this section all web page is converted into PDF - all thing inside <body> element.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
</head>
<body>
  <div>Some text on the webpage...</div>
  <img class="cropped-image" src="//dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
  <script>

	html2pdf(document.body);
    
  </script>
</body>
</html>

Element to PDF conversion

In this section we would like to show how to convert specific element to PDF document.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    
    .element {
      	border: 1px solid gray;
    }
    
    .header {
    	padding: 5px;
    	background: silver;
    }
    
    .content {
    	margin: 5px;
    }
    
  </style>
  <script type="text/javascript" src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
  <script>
    
    function createPDFDocument(selector) {
    	var element = document.querySelector(selector);
    	html2pdf(element);
    }
    
  </script>
</head>
<body>
  
  <!-- Example 1 -->
  
  <div class="element">
    <div class="header">
      <button onclick="createPDFDocument('#content-1')">Download PDF</button>
    </div>
    <div id="content-1" class="content">
      <style>
          table, th, td {
              border: 1px solid black;
              border-collapse: collapse;
          }
      </style>
      <table>
          <tr><th>ID</th><th>Username</th><th>User age</th></tr>
          <tr><td>1 </td><td>Amy     </td><td>25      </td></tr>
          <tr><td>2 </td><td>Tom     </td><td>27      </td></tr>
      </table>
    </div>
  </div>
  
  <br />
  
  <!-- Example 2 -->
  
  <div class="element">
    <div class="header">
      <button onclick="createPDFDocument('#content-2')">Download PDF</button>
    </div>
    <div id="content-2" class="content">
      <div>Some text on the webpage...</div>
  	  <img class="cropped-image" src="//dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
    </div>
  </div>
  
</body>
</html>
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

JavaScript conversion

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join