Languages
[Edit]
EN

JavaScript - convert HTML to PDF

6 points
Created by:
Marcin
18610

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