使用 jquery 自动打印 [英] auto print using jquery

问题描述

我有以下格式的数据:

(虚拟条目)(id=posGridView)

在我处理销售时，会自动打印一张带有选定列而非所有列的小收据.

As I process the sale, a small receipt print automatically with selected columns, not all the columns.

因为此网格视图中的所有数据都可用，所以如何使用 jquery 以任何格式动态打印它?

Because all data is available in this grid view, How can I print it dynamically with any format with jquery?

已编辑

实际上我想从上面的网格视图中以这种格式动态打印

Actually I want to print in this format dynamically from the above grid view

推荐答案

打印

打印页面不需要 jQuery，你只需要 JavaScript 函数:window.print();.

There's no need for jQuery for printing a page, you just need the JavaScript function: window.print();.

如果您需要打印特定内容，您可以通过 CSS 隐藏其余部分(并格式化打印区域):

If you need to print an specific content, you can hide the rest (and format the printed area) by CSS:

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style> 
<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

如您所见，通过设置 style 标签的 media 属性，您可以为普通视图(屏幕)和打印视图(打印)设置样式.全文在这里.

As you can see, by setting the media attribute of your style tag, you can set up styles for both the normal view (screen) and the printing view (print). Full article is here.

活力

您可以为流程添加某些动态，但请记住，对于用户来说，它可以动态，但是在您的代码中您必须找到并事件 附上印刷品.该事件可能是点击锚点:

You can add certain dynamism to the process, but keep in mind that it can be dinamically for the user, but in your code you'll have to find and event to attach the printing. That event could be a click in an anchor:

<a href='javascript:window.print();'>Print</a>

这可能是您页面的 onload 事件:

It could be the onload event of your page:

window.onload = function () {
    window.print();
}

或者您可能需要注意的任何其他事件(请注意，我现在使用的是 jQuery):

Or any other event that you might need to be aware (notice that now I'm using 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);
    });
});

上面的代码非常简单:在用户离开输入三秒后，printPage 将触发.如果输入在这三秒内获得焦点，则不会调用 printPage.我真的不认为这个精确的代码是你所需要的，但我会说明如何模拟动态.这里可以看到setTimeout和clearTimeout 定义.

The code above is pretty straight-forward: after three seconds of the user leaving an input, printPage will fire. If an input get the focus in those three seconds, printPage won'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 setTimeout and clearTimeout definitions.

我几乎不建议您按照上面的说明通过 CSS 隐藏不需要的打印 html 并调用 window.print.不管怎样，我在这里添加了一些代码来通过一个新页面来完成.

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.

从全新页面打印

如果你想打印从一个完全不同的页面，你可以要求那个页面，在你的服务器端管理html，然后告诉页面打印一旦加载.至少有两种方法可以做到这一点.让我们一步一步地看看它们:

If you want to print from a 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:

A) 第一个选择是将您的 GridView 发送到您的新页面并从那里打印.问题是您无法轻松打开新页面来执行此操作，因此您必须从页面浏览到显示 html-to-print 的新页面.

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.

A1) 为此，你需要用一个表单来包围你的 GridView:

A1) For this, you need to surround your GridView with a form:

<form runat="server">
<asp:GridView id="gridView" />
<asp:Button id="btnPrint" Text="Print" runat="server" OnClick="btnPrint_Click" />
</form>

A2) 然后从 *btnPrint_Click* 调用您的printPage.aspx".请记住，如果您使用 JS/jQuery 更改了 GridView，则这些更改可能不可用(因为 .NET 可能读取隐藏状态变量而不是您的 GridView).

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).

B) 第二种方法是通过 JavaScript.但请记住，如果您想在新页面中编辑表格(因为您将不会收到 GridView，而是会收到 html)，那么请记住，如果选择此选项，您会遇到困难.好处是您可以轻松打开新页面:

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:

B1) 当然，你需要一个表格(注意它的目标和动作)，比如:

B1) Off course, you'll need a form (notice its target and action), something like:

<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) 然后您必须将数据传递给该锚点.在提交表单之前，使用您的表格数据设置输入:

B2) Then you'll have to pass your data to that anchor. Before submitting the form, set the input with your table data:

$(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;
    });
});

一旦您的服务器端 (printPage.asx) 有了数据，您就可以轻松地创建要打印的 HTML 并在该页面上调用 window.print() onload，如上所述.

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.

这篇关于使用 jquery 自动打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！