<!doctype html>
<html lang="en">
<head>
<title>jsPDF</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script>
var pdf,page_section,HTML_Width,HTML_Height,top_left_margin,PDF_Width,PDF_Height,canvas_image_width,canvas_image_height;
function calculatePDF_height_width(selector,index){
page_section = $(selector).eq(index);
HTML_Width = page_section.width();
HTML_Height = page_section.height();
top_left_margin = 15;
PDF_Width = HTML_Width + (top_left_margin * 2);
PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
canvas_image_width = HTML_Width;
canvas_image_height = HTML_Height;
}
//Generate PDF
function generatePDF() {
pdf = "";
$("#downloadbtn").hide();
$("#genmsg").show();
html2canvas($(".print-wrap:eq(0)")[0], { allowTaint: true }).then(function(canvas) {
calculatePDF_height_width(".print-wrap",0);
var imgData = canvas.toDataURL("image/png", 1.0);
pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);
});
html2canvas($(".print-wrap:eq(1)")[0], { allowTaint: true }).then(function(canvas) {
calculatePDF_height_width(".print-wrap",1);
var imgData = canvas.toDataURL("image/png", 1.0);
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);
});
html2canvas($(".print-wrap:eq(2)")[0], { allowTaint: true }).then(function(canvas) {
calculatePDF_height_width(".print-wrap",2);
var imgData = canvas.toDataURL("image/png", 1.0);
pdf.addPage();
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);
//console.log((page_section.length-1)+"==="+index);
setTimeout(function() {
//Save PDF Doc
pdf.save("HTML-Document.pdf");
//Generate BLOB object
var blob = pdf.output("blob");
//Getting URL of blob object
var blobURL = URL.createObjectURL(blob);
//Showing PDF generated in iFrame element
var iframe = document.getElementById('sample-pdf');
iframe.src = blobURL;
//Setting download link
var downloadLink = document.getElementById('pdf-download-link');
downloadLink.href = blobURL;
$(".pdf-download-link").show();
$("#sample-pdf").slideDown();
$("#downloadbtn").show();
$("#genmsg").hide();
}, 0);
});
};
</script>
<style>
.print-wrap {
width: 826px;
margin: 0 auto;
}
.bgimg{
background:url('2.jpg');
background-repeat:no-repeat;
background-position:center;
height:826px;
}
</style>
</head>
<body style="text-align: center;"><br>
<a class="btn btn-primary" id="downloadbtn" onclick="generatePDF()" style="color:#ffffff"><b>Create & Download PDF</b></a>
<span id="genmsg" style="display:none;"><b>Generating PDF ...</b></span>
<br>
<iframe frameBorder="0" id="sample-pdf" style="right:0; top:53px; bottom:0; height:400px; width:100%;display:none;"></iframe>
<br>
<h1 class="pdf-download-link" style="display:none">Download Link Of Created PDF</h1>
<br>
<a class="pdf-download-link" id="pdf-download-link" style="display:none" title="Download PDF File">Download PDF file</a>
<br>
<div class="print-wrap page1">
<h3 style="color:blue;">Sample page 1 for demo</h3>
<img src="1.jpg">
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus. </p>
</div>
<div class="print-wrap page2 bgimg">
<h3 style="color:white;">Sample page 2 for demo</h3>
<p style="color:yellow;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus.</p>
</div>
<div class="print-wrap page3">
<h3 style="color:white;">Sample page 3 for demo</h3>
<img src="2.jpg">
<p style="color:black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>jsPDF</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script>
var pdf,page_section,HTML_Width,HTML_Height,top_left_margin,PDF_Width,PDF_Height,canvas_image_width,canvas_image_height;
function calculatePDF_height_width(selector,index){
page_section = $(selector).eq(index);
HTML_Width = page_section.width();
HTML_Height = page_section.height();
top_left_margin = 15;
PDF_Width = HTML_Width + (top_left_margin * 2);
PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
canvas_image_width = HTML_Width;
canvas_image_height = HTML_Height;
}
//Generate PDF
function generatePDF() {
pdf = "";
$("#downloadbtn").hide();
$("#genmsg").show();
html2canvas($(".print-wrap:eq(0)")[0], { allowTaint: true }).then(function(canvas) {
calculatePDF_height_width(".print-wrap",0);
var imgData = canvas.toDataURL("image/png", 1.0);
pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);
});
html2canvas($(".print-wrap:eq(1)")[0], { allowTaint: true }).then(function(canvas) {
calculatePDF_height_width(".print-wrap",1);
var imgData = canvas.toDataURL("image/png", 1.0);
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);
});
html2canvas($(".print-wrap:eq(2)")[0], { allowTaint: true }).then(function(canvas) {
calculatePDF_height_width(".print-wrap",2);
var imgData = canvas.toDataURL("image/png", 1.0);
pdf.addPage();
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);
//console.log((page_section.length-1)+"==="+index);
setTimeout(function() {
//Save PDF Doc
pdf.save("HTML-Document.pdf");
//Generate BLOB object
var blob = pdf.output("blob");
//Getting URL of blob object
var blobURL = URL.createObjectURL(blob);
//Showing PDF generated in iFrame element
var iframe = document.getElementById('sample-pdf');
iframe.src = blobURL;
//Setting download link
var downloadLink = document.getElementById('pdf-download-link');
downloadLink.href = blobURL;
$(".pdf-download-link").show();
$("#sample-pdf").slideDown();
$("#downloadbtn").show();
$("#genmsg").hide();
}, 0);
});
};
</script>
<style>
.print-wrap {
width: 826px;
margin: 0 auto;
}
.bgimg{
background:url('2.jpg');
background-repeat:no-repeat;
background-position:center;
height:826px;
}
</style>
</head>
<body style="text-align: center;"><br>
<a class="btn btn-primary" id="downloadbtn" onclick="generatePDF()" style="color:#ffffff"><b>Create & Download PDF</b></a>
<span id="genmsg" style="display:none;"><b>Generating PDF ...</b></span>
<br>
<iframe frameBorder="0" id="sample-pdf" style="right:0; top:53px; bottom:0; height:400px; width:100%;display:none;"></iframe>
<br>
<h1 class="pdf-download-link" style="display:none">Download Link Of Created PDF</h1>
<br>
<a class="pdf-download-link" id="pdf-download-link" style="display:none" title="Download PDF File">Download PDF file</a>
<br>
<div class="print-wrap page1">
<h3 style="color:blue;">Sample page 1 for demo</h3>
<img src="1.jpg">
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus. </p>
</div>
<div class="print-wrap page2 bgimg">
<h3 style="color:white;">Sample page 2 for demo</h3>
<p style="color:yellow;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus.</p>
</div>
<div class="print-wrap page3">
<h3 style="color:white;">Sample page 3 for demo</h3>
<img src="2.jpg">
<p style="color:black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus.</p>
</div>
</body>
</html>
No comments:
Post a Comment