HTML2PDF Example to Export Bootstrap 4 Form to PDF Document in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

 

 

 

index.html

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content=
	"width=device-width,initial-scale=1.0">

	<!-- CSS only -->
	<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
		integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
		crossorigin="anonymous" rel="stylesheet">

	<!-- Html2Pdf -->
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js"
		integrity=
"sha512vDKWohFHe2vkVWXHp3tKvIxxXg0pJxeid5eo+UjdjME3DBFBn2F8yWOE0XmiFcFbXxrEOR1JriWEno5Ckpn15A=="
		crossorigin="anonymous">
	</script>

	<style>
		.heading{
		text-align: center;
		color: #2F8D46;
		}
	</style>
</head>

<body>
	<h2 class="heading">
	GeeksForGeeks
	</h2>

	<!-- Form encrypted as text -->
	<form id ="form-print" enctype="text/plain"
		class="form-control">

		<label for="name">
		<strong>Name: </strong>
		</label>
		<input class="form-control" type="text"
		id="name" name="Name" placeholder="Enter Name">
		<br>

		<label for="age">
		<strong>Enter Age: </strong>
		</label>
		<input class="form-control" type="text"
		id="age" name="Age" placeholder="Enter Age">
		<br>

		<label for="subject">
		<strong>Select Subject: </strong>
		</label>
		<select class="form-control"
			id="subject" name="subject">
			<option value="Web">
				Web development
			</option>
			<option value="App">
				App development
			</option>
			<option value="Others">
				Others
			</option>
		</select>
		<br>
		
		<label for="message">
		<strong>Enter Message </strong>
		</label>
		<textarea class= "form-control"
		id="message" name="message"
		placeholder="Enter you message"
		style="height:100px">
		</textarea>
		<br>

		<input type="button" class="btn btn-primary"
		onclick="GeneratePdf();" value="GeneratePdf">
	</form>
				
	<script>		
		// Function to GeneratePdf
		function GeneratePdf() {
			var element = document.getElementById('form-print');
			html2pdf(element);
		}
	</script>

	<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
		integrity=
"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
		crossorigin="anonymous">
	</script>
</body>

</html>

Leave a Reply