Print DIV content by JQuery
suppose i have many div's in my page 开发者_如何学Pythonbut i want to print the content of specific div using jquery. i found there is a plugin for that.
jQuery Print Element
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
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
* });
If a hidden div can't be printed with that one line:
$('SelectorToPrint').printElement();
simply change it to:
$('SelectorToPrint').show().printElement();
which should make it work in all cases.
for the rest, there's no solution. the plugin will open the print-dialog for you where the user has to choose his printer. you simply can't find out if a printer is attached with javascript (and you (almost) can't print without print-dialog - if you're thinking about that).
NOTE:
The
$.browserobject has been removed in version 1.9.x of jQuery making this library unsupported.
try this jquery library, jQuery Print Element
http://projects.erikzaadi.com/jQueryPlugins/jQuery.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">
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 :
- wrap the div you want to print into another div.
- set the wrapper div display status to none in css.
- keep the div you want to print display status as block, anyway it will be hidden as its parent is hidden.
- simply call
$('SelectorToPrint').printElement();
加载中,请稍侯......
精彩评论