Skip to content

Instantly share code, notes, and snippets.

@Rast1234

Rast1234/print_tests.html

Created January 24, 2014 15:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Rast1234/8598949 to your computer and use it in GitHub Desktop.
Save Rast1234/8598949 to your computer and use it in GitHub Desktop.
Download ZIP
Printing part of a webpage, different ways
Raw
print_tests.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="printThis.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//printThis.js is a jQuery plugin, get it here:
// https://github.com/jasonday/printThis/
//=================================================================
$('#print_page_1').click(function () {
var result = window.print();
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_page_2').click(function () {
var result = document.execCommand('print');
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_page_3').click(function () {
var result = document.execCommand('print', false, null);
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_page_4').click(function () {
var result = $('body').printThis();
console.log($(this).attr('id') + " returned '" + result + "'");
});
//=================================================================
$('#print_window_1').click(function () {
var printMe = document.getElementById("printMe");
var printWindow = window.open("about:blank", "PrintWindow", "", "");
var printDocument = printWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printWindow.print();
printWindow.close();
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_window_2').click(function () {
var printMe = document.getElementById("printMe");
var printWindow = window.open("about:blank", "PrintWindow", "", "");
var printDocument = printWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printDocument.execCommand('print');
printWindow.close();
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_window_3').click(function () {
var printMe = document.getElementById("printMe");
var printWindow = window.open("about:blank", "PrintWindow", "", "");
var printDocument = printWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printDocument.execCommand('print', false, null);
printWindow.close();
console.log($(this).attr('id') + " returned '" + result + "'");
});
//=================================================================
$('#print_iframe_1').click(function () {
var printMe = document.getElementById("printMe");
var printIframe = document.createElement('iframe');
printIframe.name = "name_for_iframe";
document.body.appendChild(printIframe);
var printIframeWindow = window.frames["name_for_iframe"];
var printDocument = printIframeWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printIframeWindow.print();
printIframe.parentNode.removeChild(printIframe);
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_iframe_2').click(function () {
var printMe = document.getElementById("printMe");
var printIframe = document.createElement('iframe');
printIframe.name = "name_for_iframe";
document.body.appendChild(printIframe);
var printIframeWindow = window.frames["name_for_iframe"];
var printDocument = printIframeWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printDocument.execCommand('print');
printIframe.parentNode.removeChild(printIframe);
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_iframe_3').click(function () {
var printMe = document.getElementById("printMe");
var printIframe = document.createElement('iframe');
printIframe.name = "name_for_iframe";
document.body.appendChild(printIframe);
var printIframeWindow = window.frames["name_for_iframe"];
var printDocument = printIframeWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printDocument.execCommand('print', false, null);
printIframe.parentNode.removeChild(printIframe);
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_iframe_4').click(function () {
var result = $('#printMe').printThis();
console.log($(this).attr('id') + " returned '" + result + "'");
});
//=================================================================
$('#print_existing_1').click(function () {
var printMe = document.getElementById("printMe");
var printIframeWindow = window.frames["test_iframe"];
var printDocument = printIframeWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printIframeWindow.print();
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_existing_2').click(function () {
var printMe = document.getElementById("printMe");
var printIframeWindow = window.frames["test_iframe"];
var printDocument = printIframeWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printDocument.execCommand('print');
console.log($(this).attr('id') + " returned '" + result + "'");
});
$('#print_existing_3').click(function () {
var printMe = document.getElementById("printMe");
var printIframeWindow = window.frames["test_iframe"];
var printDocument = printIframeWindow.document;
printDocument.write("<html><body></body></html>");
printDocument.body.innerHTML = printMe.innerHTML;
var result = printDocument.execCommand('print', false, null);
console.log($(this).attr('id') + " returned '" + result + "'");
});
});
</script>
</head>
<body>
<div style="float:left;">
<h3>Whole Page</h3>
<button id="print_page_1">.print()</button><br />
<button id="print_page_2">.execCommand('print')</button><br />
<button id="print_page_3">.execCommand('print', false, null)</button><br />
<button id="print_page_4">jquery plugin?</button><br />
</div>
<div style="float:left;">
<h3>Div in Window</h3>
<button id="print_window_1">.print()</button><br />
<button id="print_window_2">.execCommand('print')</button><br />
<button id="print_window_3">.execCommand('print', false, null)</button><br />
</div>
<div style="float:left;">
<h3>Div in Iframe</h3>
<button id="print_iframe_1">.print()</button><br />
<button id="print_iframe_2">.execCommand('print')</button><br />
<button id="print_iframe_3">.execCommand('print', false, null)</button><br />
<button id="print_iframe_4">jquery plugin?</button><br />
</div>
<div style="float:left;">
<h3>Existing Iframe</h3>
<button id="print_existing_1">.print()</button><br />
<button id="print_existing_2">.execCommand('print')</button><br />
<button id="print_existing_3">.execCommand('print', false, null)</button><br />
</div>
<div style="clear:both;"></div>
<div id="printMe">
<h1>Header</h1>
<hr />
some text<br />
another text<br />
<h2>
<span style="color:red">red text</span>
</h2>
</div>
<iframe name=test_iframe width=0 height=0 frameborder=0></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment