<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML to PDF Example - PHP Kishan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<style>
.center{text-align: center;}
.pdfdiv{background-color: #d9ec58;margin: 50px;padding:30px;}
.innerdiv{padding: 10px;margin: 15px 0;border: 2px solid #ea5555;}
.loader-div {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.66);z-index: 9;bottom: 0;display: block;text-align:center;color: #fff;font-size: 22px;padding: 30% 0;}
.dp-img{border: 1px solid #e65959;border-radius: 50%;padding: 12px;margin: 6px;}
.btn-div{margin: 58px auto;}
.downloadpdf{text-align: center;background-color: #27d848;width: max-content;padding: 10px;border-radius: 10px;margin: 0 auto;font-size: 30px;text-decoration-line: none;}
.downloadpdf:hover{background-color: #d1d451;}
</style>
</head>
<body>
<div class="btn-div center">
<a class="downloadpdf" href="javascript:;" data-pdf="html2pdf" data-target="pdfdiv">Download PDF</a>
</div>
<div id="pdfdiv" class="pdfdiv center">
<div class="innerdiv">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h5>This is a image.</h5>
<div>
<img class="dp-img" src="image.png" alt="HTML to PDF">
</div>
</div>
<div class="innerdiv">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h5>This is a image.</h5>
<div>
<img class="dp-img" src="image.png" alt="HTML to PDF">
<img class="dp-img" src="image.png" alt="HTML to PDF">
<img class="dp-img" src="image.png" alt="HTML to PDF">
<img class="dp-img" src="image.png" alt="HTML to PDF">
<img class="dp-img" src="image.png" alt="HTML to PDF">
<img class="dp-img" src="image.png" alt="HTML to PDF">
<img class="dp-img" src="image.png" alt="HTML to PDF">
<img class="dp-img" src="image.png" alt="HTML to PDF">
</div>
</div>
<div class="innerdiv">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h5>This is a image.</h5>
<div>
<img class="dp-img" src="image.png" alt="HTML to PDF">
</div>
</div>
</div>
<div class="btn-div center">
<a class="downloadpdf" href="javascript:;" data-pdf="html2pdf" data-target="pdfdiv">Download PDF</a>
</div>
<div class="loader-div">Loading...</div>
<footer>
<script>
jQuery(document).ready(function(){
jQuery('.loader-div').hide();
jQuery(".downloadpdf").click(function(e){
jQuery('.loader-div').show();
var pdfname = jQuery(this).data('pdf');
var pdftarget = jQuery(this).data('target');
console.log("PDF NAME:" + pdfname + "PDF HTML Div: " + pdftarget);
var pdfw = jQuery('#'+pdftarget).width();
var pdfh = jQuery('#'+pdftarget).height();
// console.log ('div width: '+ pdfw + ' div height: '+pdfh);
html2canvas(document.getElementById(pdftarget)).then(function(canvas) {
var imgData = canvas.toDataURL("image/jpeg");
// console.log(imgData);
var pdf = new jsPDF('','px',[pdfw,pdfh]);
var pwidth = pdf.internal.pageSize.getWidth();
var pheight = pdf.internal.pageSize.getHeight();
// console.log('PDF pwidth: '+ pwidth + ' PDF height: '+pheight);
pdf.addImage(imgData, 'JPEG', 0, 0, pwidth, pheight);
pdf.save(pdfname+'.pdf');
jQuery('.loader-div').hide();
}).catch(function(M) {
console.log(M);
});
});
});
</script>
</footer>
</body>
</html>
Note: All images of HTML page must be on the current domain.
