EN
JavaScript - convert HTML to PDF
6
points
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>