Javascript 通过 JQuery 打印 DIV 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7530192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print DIV content by JQuery
提问by Keith Costa
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.
假设我的页面中有很多 div，但我想使用 jquery 打印特定 div 的内容。我发现有一个插件。
using this plugin we can easily print div content like below.
使用此插件，我们可以轻松打印如下所示的 div 内容。
$('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?
但是如果我的 div 隐藏在页面中会发生什么？那么它是否有效。这个插件可以打印隐藏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.
如果打印机未与客户端机器连接会发生什么。如果打印机不在那里，我想向客户显示“找不到打印机”的消息？如何处理这种情况。所以请告诉我在页面中打印隐藏 div 内容的最佳方法是什么，以及如果没有连接打印机，也可以处理打印机问题。
thanks
谢谢
回答by Bishoy Hanna
I prefer this one, I have tested it and its working
我更喜欢这个，我已经测试过它和它的工作原理
https://github.com/jasonday/printThis
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
* });
回答by oezi
your question doesn't sound as if you even tried it yourself, so i shouldn't even think of answering, but: if a hidden div can't be printed with that one line:
你的问题听起来不像你自己尝试过，所以我什至不应该考虑回答，但是：如果隐藏的 div 不能用那一行打印：
$('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).
其余的，没有解决方案。该插件将为您打开打印对话框，用户必须在其中选择他的打印机。您根本无法确定打印机是否与 javascript 连接（并且您（几乎）无法在没有打印对话框的情况下进行打印 - 如果您正在考虑这一点）。
NOTE:
笔记：
The
$.browserobject has been removed in version 1.9.x of jQuery making this library unsupported.
该
$.browser对象已在 jQuery 1.9.x 版中删除，从而使该库不受支持。
回答by Keith Costa
try this jquery library, jQuery Print Element
试试这个 jquery 库，jQuery Print Element
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
回答by CyberAbhay
Here is a JQuery&JavaScript solutions to print div as it styles(with internal and external css)
这是一个 JQuery&JavaScript 解决方案，用于打印 div 样式（使用内部和外部 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.
这将在新窗口中打印您的 div。
Button to trigger event
按钮触发事件
<input type="button" id="btnPrint" value="Print This">
回答by user826876
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();
- 将要打印的 div 包装到另一个 div 中。
- 在css中将包装器div显示状态设置为none。
- 将要打印显示状态的 div 保留为块，无论如何它将被隐藏，因为它的父级被隐藏。
- 简单地打电话
$('SelectorToPrint').printElement();
回答by user2086598
There is a way to use this with a hidden div but you have to work abit more with the printElement() function and css.
有一种方法可以将它与隐藏的 div 一起使用，但您必须更多地使用 printElement() 函数和 css。
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.
这将覆盖 display: none 在您打开的新窗口中，内容将显示在打印预览页面上，并且您网站上的 div 保持隐藏。
