Download HTML Page / Div to Pdf or Image Using JQUERY / JS / CANVAS JS
<html>
<head>
<title>Test Download</title>
<style>
.down-pdf{
display:inline-block;
color:#444;
border:1px solid #CCC;
background:#DDD;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
cursor:pointer;
vertical-align:middle;
max-width: 100px;
padding: 5px;
text-align: center;
}
</style>
</head>
<div class="down-pdf printpdf" style="font-weight: normal; padding: 0px;">
Download PDF
</div>
<div id="pageWrapperProcess">
<b>संकष्टी चतुर्थीला कोणते पदार्थ खावेत?</b>
फळे - रसदार फळांचे सेवन करावे. उपवासामुळे शरीरातील पाणी कमी होते. ते भरुन काढण्यासाठी रसदार फळांचे सेवन करा
शाबुदाणा- संकष्टी चतुर्थीत तुम्ही शाबुदाण्या वापर करू शकता
दही - आंबड पदार्थ खाल्ले तरी चालेल
चहा - उपवास करताना थकवा जाणवला तर तुम्ही चहा घेऊ शकता.
</br>
<b>कोणते पदार्थ खाऊ नये?</b>
संकष्टी चतुर्थीचा उपवास करताना जमीनीखाली उगवलेले जे पदार्थ आहे. ते खाऊ नका. गाजर, बीट, मुळा, कांदा हे खाण्यास हिंदू धर्मशास्त्राने मनाई केली आहे.
फणस खाऊ नये. फणसापासून बनलेले कोणतेही पदार्थ करू नका.
श्रीगणेशाचे व्रत करताना पूजा करताना कुठेही तुळशीचा वापर चुकुनही करू नका. कारण तुळशीचे आणि श्रीगणेशाचे सख्य नाही त्यांच्यात वैर आहे. त्यामुळे चुकुनही तुळशीचा वापर होणार नाही, याची काळजी घ्या. शिवपरिवारात तुळशीचा वापर वर्ज्य आहे.
या दिवशी तुमच्या कुटुंबातील सदस्य मांसाहार करणार नाही.
या दिवशी उष्ट अन्न खाऊ नये.
मद्यपान करू नये
</div>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
$(document).ready(function(){
PrintPanelPDF();
});
$('.printpdf').click(function () {
PrintPanelPDF();
});
function PrintPanelPDF() {
var HTML_Width = $("#pageWrapperProcess").width();
var HTML_Height = $("#pageWrapperProcess").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
var poster = $(".imgNoBorder").attr("src");
html2canvas(($("#pageWrapperProcess")[0]), { allowTaint: true, useCORS: true, logging: true }).then(function (canvas) {
var imgData = canvas.toDataURL("image/png", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width + 10, canvas_image_height + 10);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), (canvas_image_width + 10), (canvas_image_height + 10));
}
pdf.save("MyFile.pdf");
$(".html-content").hide();
});
}
</script>
</html>
Comments
Post a Comment