Java Script

How to print html form in Javascript

In this example, I have write code for how to print HTML Form to PDF using Javascript on click event.

  • The onclick=”PrintPDF()” function called in button on onclick event and print contents called by div id given as bellow code –
<!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

Leave a Reply

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

× How can I help you?