cferdinandi/print-to-pdf.html

## print-to-pdf.html
<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Print to PDF</title>
		<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">


		<style type="text/css">
			*,
			*:before,
			*:after {
				box-sizing: border-box
			}

			/**
			 * This provides 8.5x11 printer paper dimensions for the printable areas
			 */
			.center {
				width: 7.5in;
				margin-left: auto;
				margin-right: auto
			}

			#certificate {
				background-color: #fff;
				border: 1px solid gray;
				height: 10in;
				padding: 3.5em 4.5em;
				position: relative
			}

			/**
			 * Hide the instructions and page border when
			 */
			@media print {
				#certificate {
					border: 0
				}

				#message {
					display: none
				}
			}

			hr {
				border: 0;
				border-top: 1px solid #e5e5e5;
				border-bottom: 0 solid transparent;
				box-sizing: content-box;
				margin: 1.8em auto;
				overflow: visible
			}

			/**
			 * Define the body typography
			 * Add a background color when NOT printing
			 */
			body {
				background-color: #f7f7f7;
				font-family: Helvitica, Arial, sans-serif;
				font-size: 100%
			}

			@media print {
				body {
					background-color: #fff
				}
			}

			p {
				margin: 0 0 1em;
				padding: 0
			}

			/**
			 * If you want the user to be able to edit any areas, this gives it a dashed border when NOT printed
			 */
			[contenteditable=true] {
				border: 1px dashed #08c
			}

			@media print {
				[contenteditable=true] {
					border: none
				}
			}
		</style>

	</head>

	<body>

		<main>
			<div id="pdf"></div>
		</main>


		<script>
			// Get the element to inject the content into
			var pdf = document.querySelector('#pdf');

			// Generate the HTML
			// This is just a generic boilerplate, but if you had stuff custom to the user, you could add some conditional logic in here
			var getHTML = function () {

				var html =
					'<div class="center text-medium" id="message">\
						<p>Whatever is in this section does NOT get printed out. Its for providing instructions on what to do.</p>\
						<p><strong>To get a PDF version of this file, click <em>File => Print => Save as PDF</em>.</strong></p>\
						<hr>\
					</div>\
					<div class="center" id="certificate">\
						<p>Whatever is here gets printed out.</p>\
					</div>';

				return html;

			};

			// Render the HTML into the UI
			pdf.innerHTML = getHTML();
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Print to PDF</title>
	<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">


	<style type="text/css">
	*,
	*:before,
	*:after {
	box-sizing: border-box
	}

	/**
	* This provides 8.5x11 printer paper dimensions for the printable areas
	*/
	.center {
	width: 7.5in;
	margin-left: auto;
	margin-right: auto
	}

	#certificate {
	background-color: #fff;
	border: 1px solid gray;
	height: 10in;
	padding: 3.5em 4.5em;
	position: relative
	}

	/**
	* Hide the instructions and page border when
	*/
	@media print {
	#certificate {
	border: 0
	}

	#message {
	display: none
	}
	}

	hr {
	border: 0;
	border-top: 1px solid #e5e5e5;
	border-bottom: 0 solid transparent;
	box-sizing: content-box;
	margin: 1.8em auto;
	overflow: visible
	}

	/**
	* Define the body typography
	* Add a background color when NOT printing
	*/
	body {
	background-color: #f7f7f7;
	font-family: Helvitica, Arial, sans-serif;
	font-size: 100%
	}

	@media print {
	body {
	background-color: #fff
	}
	}

	p {
	margin: 0 0 1em;
	padding: 0
	}

	/**
	* If you want the user to be able to edit any areas, this gives it a dashed border when NOT printed
	*/
	[contenteditable=true] {
	border: 1px dashed #08c
	}

	@media print {
	[contenteditable=true] {
	border: none
	}
	}
	</style>

	</head>

	<body>

	<main>
	<div id="pdf"></div>
	</main>


	<script>
	// Get the element to inject the content into
	var pdf = document.querySelector('#pdf');

	// Generate the HTML
	// This is just a generic boilerplate, but if you had stuff custom to the user, you could add some conditional logic in here
	var getHTML = function () {

	var html =
	'<div class="center text-medium" id="message">\
	<p>Whatever is in this section does NOT get printed out. Its for providing instructions on what to do.</p>\
	<p><strong>To get a PDF version of this file, click <em>File => Print => Save as PDF</em>.</strong></p>\
	<hr>\
	</div>\
	<div class="center" id="certificate">\
	<p>Whatever is here gets printed out.</p>\
	</div>';

	return html;

	};

	// Render the HTML into the UI
	pdf.innerHTML = getHTML();
	</script>
	</body>
	</html>