Hi friends, today I will tell you through experts php tutorial how you will convert html file to pdf file by javascript. So let’s try to understand step to step.
Now you will be told in 2 steps how you can convert html file to pdf. First you create html file. And then after that create the code of javascript. So let’s understand all the steps. How do we do it?
Overview
Step 1:- First of all create HTML File (html-to-pdf-convert.html).
Step 2:- Create JavaScript code into Same File.
Step 1:- First of all create HTML File (html-to-pdf-convert.html).
html-to-pdf-convert.html
<!DOCTYPE html>
<html>
<head>
<title>How to Convert HTML to PDF Using JavaScript With Demo?</title>
</head>
<body>
<h1>How to Convert HTML to PDF Using JavaScript With Demo?</h1>
<button id="clickdownload">Download in PDF File</button>
<div id="content">
<table id="example1" class="display table table-bordered table-striped row-
border order-column" cellspacing="0" width="auto">
<thead style="background-color: green;">
<tr>
<th>No</th>
<th>Name</th>
<th>Code</th>
<th>User Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jyoti</td>
<td>0421</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Step 2:- Create JavaScript code into Same File.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
function onClick() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('file.pdf');
}
});
};
var element = document.getElementById("clickdownload");
element.addEventListener("click", onClick);
</script>
You have been told this code separately. But the name of the file is same. You are given below by adding the code of html and javascript to the same file.
html-to-pdf-convert.html
<!DOCTYPE html>
<html>
<head>
<title>How to Convert HTML to PDF Using JavaScript With Demo?</title>
</head>
<body>
<h1>How to Convert HTML to PDF Using JavaScript With Demo?</h1>
<button id="clickdownload">Download in PDF File</button>
<div id="content">
<table id="example1" class="display table table-bordered table-striped row-
border order-column" cellspacing="0" width="auto">
<thead style="background-color: green;">
<tr>
<th>No</th>
<th>Name</th>
<th>Code</th>
<th>User Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jyoti</td>
<td>0421</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
function onClick() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('file.pdf');
}
});
};
var element = document.getElementById("clickdownload");
element.addEventListener("click", onClick);
</script>
</body>
</html>