Print Specific DIV Content Using jQuery
Most websites nowadays may need print function for its content like article, report, table, invoice, and other printable contents. With web browser, we can also just simply press the key “Ctrl + p” to have any page printed. The problem is that, using that direct keyboard print keys are printing the whole page including the unwanted areas that normal look really bad or have problem with web layout leading the messy look on the printed document. What if we can print a specific area of your website! What if we want to print only a div content, not anything else!
This tutorial is going to tell you an effective trick to deal with this issue. You may just need to identify a specific DIV to be printed once we click the “Print” button. Please follow this tutorial carefully, we will show you all the things to have it worked.
INSTRUCTION
HTML
<span id="print"> Print </span> <div id="divToPrint"></div>
This is the div to be printed. You can name it anything you want. In this tutorial, I just name “divToPrint”. You can place this DIV anywhere in your body area of your document.
Style Sheet
<style media="all">
#divToPrint{padding:20px;}
</style>
This style sheet is just optional. You can make your own style for your content decoration.
Javascript
<script>
function nWin(context,title) {
var printWindow = window.open('', '');
var doc = printWindow.document;
doc.write("<html><head>");
doc.write("<title>"+title+" - Print Mode</title>");
doc.write("<link href='/css/style.css' rel='stylesheet' type='text/css' media='print'");
doc.write("</head><body>");
doc.write(context);
doc.write("</body></html>");
doc.close();
function show() {
if (doc.readyState === "complete") {
printWindow.focus();
printWindow.print();
printWindow.close();
} else {
setTimeout(show, 100);
}
};
show();
};
</script>
This is the main javascript function to open a new browser tap just to proceed the printing function separately from the original document. Within this javascript code, a new temporary tap is created by setting its page title and attaching some needed css resource. For CSS code, you can using either inline or external one. Then, the code copies the content from the original DIV and paste it to the new created new tap.
There is also a sub function within that main function named “show”. This sub function is used to handle the callback role when the printing is done. The temporary tap will be closed once the printing is done.
<script>
$(function() {
$("#print").click(function(){nWin($("#divToPrint").html(),$("#pagename").html());});
});
</script>
This another little javascript code is also required to activate the printing function by assign the “click” event to the “print” button. Whenever the “Print” button is clicked, the new tap will be launched and the printing panel of browser will automatically pop up immediately.
That’s all to have your print button works really fine. Hope this tutorial help your work! If it does, please share it to your friends.
