使用 jquery 自动打印
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10972511/
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
auto print using jquery
提问by Shahid Ghafoor
I have the data in the following format:
我有以下格式的数据：
(Dummy Entries)(id=posGridView)
（虚拟条目）（id = posGridView）
As I process the sale, a small receipt print automatically with selected columns, not all the columns.
在我处理销售时，会自动打印一张带有选定列而非所有列的小收据。
Because all data is available in this grid view, How can I print it dynamically with any format with jquery?
因为此网格视图中的所有数据都可用，如何使用 jquery 以任何格式动态打印它？
Edited
已编辑
Actually I want to print in this format dynamically from the above grid view
其实我想从上面的网格视图中以这种格式动态打印
回答by Ale
Printing
印刷
There's no need for jQuery for printing a page, you just need the JavaScript function: window.print();.
不需要 jQuery 来打印页面，您只需要 JavaScript 函数：window.print();.
If you need to print an specific content, you can hide the rest (and format the printed area) by CSS:
如果需要打印特定内容，可以通过 CSS 隐藏其余部分（并格式化打印区域）：
<style media="screen">
.noPrint{ display: block; }
.yesPrint{ display: block !important; }
</style>
<style media="print">
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
</style>
As you can see, by setting the mediaattribute of your style tag, you can set up styles for both the normal view (screen) and the printing view (print). Full article is here.
如您所见，通过设置style 标签的media属性，您可以为普通视图（屏幕）和打印视图（打印）设置样式。全文在这里。
Dynamism
活力
You can add certain dynamism to the process, but keep in mind that it can be dinamicallyfor the user, but in your code you'll have to find and eventto attach the printing. That event could be a click in an anchor:
您可以在一定的活力增加的过程，但请记住，它可以dinamically用户，但在你的代码，你必须找到和事件来连接打印。该事件可能是点击锚点：
<a href='javascript:window.print();'>Print</a>
<a href='javascript:window.print();'>Print</a>
It could be the onloadevent of your page:
它可能是您页面的onload事件：
window.onload = function () {
window.print();
}
Or any other event that you might need to be aware (notice that now I'm using jQuery):
或者您可能需要注意的任何其他事件（请注意，现在我正在使用 jQuery）：
var doPrintPage;
function printPage(){
window.print();
}
$(document).ready(function(){
$('input').blur(function(){
//3sec after the user leaves the input, printPage will fire
doPrintPage = setTimeout('printPage();', 3000);
});
$('input').focus(function(){
//But if another input gains focus printPage won't fire
clearTimeout(doPrintPage);
});
});
The code above is pretty straight-forward: after three seconds of the user leaving an input, printPagewill fire. If an input get the focus in those three seconds, printPagewon't be called. I don't really think this precise code is what you need, but I'll make the point how to emulate dynamism. Here can see the setTimeoutand clearTimeoutdefinitions.
上面的代码非常简单：在用户离开输入三秒后，printPage将触发。如果输入在这三秒内获得焦点，则不会调用printPage。我真的不认为这个精确的代码是你需要的，但我会说明如何模拟dynamism。这里可以看到setTimeout和clearTimeout 的定义。
EDIT: I hardly suggest you to hide your unwanted-to-print html through CSS as explained above and call window.print. Anyway, here I'm adding some code for doing it through a new page.
编辑：我几乎不建议您按照上面的说明通过 CSS 隐藏不需要的打印 html 并调用window.print。无论如何，我在这里添加了一些代码来通过一个新页面来完成它。
Printing from a brand new page
从全新的页面打印
If you want to print froma totally different page that the one you're showing, you can ask for that page, manage the html in your server-side and then tell the page to print as soon as get loaded. There's at least two ways to do this. Let see them step by step:
如果您想从与您显示的页面完全不同的页面打印，您可以请求该页面，在服务器端管理 html，然后告诉页面在加载后立即打印。至少有两种方法可以做到这一点。让我们一步一步地看看它们：
A) The first choice is to send your GridView to your new page and print it from there. The problem is that you can't easily open a new page to do this, so you'll have to browse from your page to a new one showing your html-to-print.
A）第一个选择是将您的 GridView 发送到您的新页面并从那里打印。问题是您无法轻松打开新页面来执行此操作，因此您必须从页面浏览到显示 html-to-print 的新页面。
A1) For this, you need to surround your GridView with a form:
A1) 为此，您需要用一个表单包围您的 GridView：
<form runat="server">
<asp:GridView id="gridView" />
<asp:Button id="btnPrint" Text="Print" runat="server" OnClick="btnPrint_Click" />
</form>
A2) Then from *btnPrint_Click* you'll call your "printPage.aspx". Remember that if you changed your GridView with JS/jQuery, those changes could be not available (since it's likely that .NET reads a hidden state variable rather than your GridView).
A2) 然后从 *btnPrint_Click* 你会调用你的“printPage.aspx”。请记住，如果您使用 JS/jQuery 更改了 GridView，则这些更改可能不可用（因为 .NET 可能读取隐藏状态变量而不是您的 GridView）。
B) The second way to do it is through JavaScript. But remember that with this choice you'll have a hard time if you want to edit your table in your new page (because you won't be receiving a GridView, you'll receiving html). The good thing is that you can easily open a new page:
B) 第二种方法是通过 JavaScript。但请记住，如果您想在新页面中编辑表格（因为您将不会收到 GridView，而是会收到 html），那么请记住，如果您选择此选项，您会遇到困难。好处是您可以轻松打开新页面：
B1) Off course, you'll need a form (notice its target and action), something like:
B1）当然，你需要一个表格（注意它的目标和动作），比如：
<form id="myPageForm" name="myPageForm" target="_blank" action="printPage.aspx">
<input type="hidden" name="htmlToPrint" id="htmlToPrint" />
<input type="button" value="submit">Print</button>
</form>
B2) Then you'll have to pass your data to that anchor. Before submitting the form, set the input with your table data:
B2）然后您必须将数据传递给该锚点。在提交表单之前，使用您的表数据设置输入：
$(document).ready(function(){
$('#myPageForm').submit(function(){
//Filling the hidden input
var htmlToPrint = $(".posGridView").html(); //I'm using a class and not an ID 'cause .NET will change your GridView's ID when rendering you page
$("#htmlToPrint").value(htmlToPrint);
return true;
});
});
Once you have the data in your server side (printPage.asx), you can easily create your HTML-to-print and call window.print() on that page onload, as described above.
一旦在服务器端 (printPage.asx) 有了数据，您就可以轻松地创建 HTML-to-print 并在该页面onload上调用 window.print() ，如上所述。
