suppose i have many div's in my page but i want to print the content of specific div using jquery. i found there is a plugin for that.
using this plugin we can easily print div content like below.
$('SelectorToPrint').printElement();
but what happen if my div is hidden in page. so then does it work. this plugin can print the content of hidden div?
what happen if printer is not attach with client machine. i want to show message if printer is not there to customer that "Printer not found"? how to handle this situation. so please advise me what would be the best approach to print the content of hidden div in page and as well as handle printer issue if printer is not attached.
thanks
This question is related to
javascript
jquery
I prefer this one, I have tested it and its working
https://github.com/jasonday/printThis
$("#mySelector").printThis();
or
$("#mySelector").printThis({
* debug: false, * show the iframe for debugging
* importCSS: true, * import page CSS
* printContainer: true, * grab outer container as well as the contents of the selector
* loadCSS: "path/to/my.css", * path to additional css file
* pageTitle: "", * add title to print page
* removeInline: false * remove all inline styles from print elements
* });
There is a way to use this with a hidden div but you have to work abit more with the printElement() function and css.
Css:
#SelectorToPrint{
display: none;
}
Script:
$("#SelectorToPrint").printElement({ printBodyOptions:{styleToAdd:'padding:10px;margin:10px;display:block', classNameToAdd:'WhatYouWant'}})
This will override the display: none in the new window you open and the content will be displayed on the print-preview page and the div on you site remains hidden.
You can follow these steps :
$('SelectorToPrint').printElement();Here is a JQuery&JavaScript solutions to print div as it styles(with internal and external css)
$(document).ready(function() {
$("#btnPrint").live("click", function () {//$btnPrint is button which will trigger print
var divContents = $(".order_summery").html();//div which have to print
var printWindow = window.open('', '', 'height=700,width=900');
printWindow.document.write('<html><head><title></title>');
printWindow.document.write('<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" >');//external styles
printWindow.document.write('<link rel="stylesheet" href="/css/custom.css" type="text/css"/>');
printWindow.document.write('</head><body>');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.onload=function(){
printWindow.focus();
printWindow.print();
printWindow.close();
}
});
});
This will print your div in new window.
Button to trigger event
<input type="button" id="btnPrint" value="Print This">
try this jquery library, jQuery Print Element
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
Source: Stackoverflow.com