How to print html form in Javascript? : जावास्क्रिप्ट में HTML फॉर्म कैसे प्रिंट करें?

How to print html form in JavaScript

In this example, I have written code for how to print HTML Form to PDF using Javascript on click event (इस उदाहरण में, मैंने क्लिक इवेंट पर जावास्क्रिप्ट का उपयोग करके HTML फॉर्म को पीडीएफ में प्रिंट करने के लिए कोड लिखा है).

  • The onclick=”PrintPDF()” function called in button on onclick event and print contents called by div id given as bellow code (onclick=”PrintPDF()” फ़ंक्शन को onclick इवेंट पर बटन में कॉल किया जाता है और नीचे दिए गए कोड के रूप में दी गई div id द्वारा प्रिंट सामग्री को कॉल किया जाता है)-
<!DOCTYPE html>
<html>
    <head>
		<style></style>
		<script>
		function PrintPDF() {
			var toPrint = document.getElementById('printDivContents');
			var popupWin = window.open('', '_blank', 'left=100,top=100,width=1100,height=600,tollbar=0,scrollbars=1,status=0,resizable=1');
			popupWin.document.open();
			popupWin.document.write('<html><title>:: Print Preview Page ::</title><head><style>body{font-family:Arial}</style></head><body onload="window.print()">')
			popupWin.document.write(toPrint.innerHTML);
			popupWin.document.write('</body></html>');
			popupWin.document.close();
		}
		</script>
	</head>
	<body>
		<button type="button" class="btn btn-default btn-primary" data-print="modal" onclick="PrintPDF()">Print</button>	
		<div class="users form" id="printDivContents">
	
     <!-- here write css code for print -->
			<style>	h3{	color:red;}	</style>

			<div class="row mb-3 justify-content-between">	
				<h3>Example of HTML Form Print</h3>
				<div class="col-sm-7">
				 Candidate Name : Ashok G
				</div>
			</div>
			<div class="row mb-3 justify-content-between">										
				<div class="col-sm-7">
				 Date of Birth : 15-08-1995
				</div>
			</div>
			<div class="row mb-3 justify-content-between">										
				<div class="col-sm-7">
				 Address : Delhi
				</div>
			</div>
			<div class="row mb-3 justify-content-between">										
				<div class="col-sm-7">
				 Education : B.Tech
				</div>
			</div>
		</div>					
	</body>
</html>
  • After click on “Print” button it will shows like bellow given picture for chrome browser (“प्रिंट” बटन पर क्लिक करने के बाद यह क्रोम ब्राउज़र के लिए नीचे दी गई तस्वीर की तरह दिखाई देगा)-

More validations … Click here …

How to print html form in Javascript

Tags: How to print entire HTML in JavaScript, How to print HTML content on click of a button, How to print html form in JavaScript, How to print HTML page as PDF

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *