9

我有以下格式的数据：

（虚拟条目）（id=posGridView）

在此处输入图像描述

当我处理销售时，会自动打印一张小收据，其中包含选定的列，而不是所有列。

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

已编辑

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

在此处输入图像描述

4

1 回答 1

29

印刷

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

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

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

如您所见，通过设置样式标签的媒体属性，您可以为普通视图（屏幕）和打印视图（打印）设置样式。全文在这里。

活力

您可以为该过程添加某些动态，但请记住，它可以为用户动态，但在您的代码中，您必须找到并附加打印的事件。该事件可能是点击锚点：

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

它可能是您页面的onload事件：

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

或者您可能需要注意的任何其他事件（请注意，现在我正在使用 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);
    });
});

上面的代码非常简单：在用户离开输入 3 秒后，printPage将触发。如果输入在这三秒钟内获得焦点，则不会调用printPage 。我真的不认为这个精确的代码是你需要的，但我会指出如何模仿dynamism。这里可以看到setTimeout和clearTimeout的定义。

编辑：我几乎不建议您如上所述通过 CSS 隐藏您不需要的打印 html 并调用window.print。无论如何，我在这里添加一些代码来通过新页面进行操作。

从全新的页面打印

如果您想从与您显示的页面完全不同的页面打印，您可以请求该页面，在服务器端管理 html，然后告诉页面在加载后立即打印。至少有两种方法可以做到这一点。让我们一步一步看他们：

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

A1）为此，您需要用一个表单包围您的 GridView：

<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）。

B) 第二种方法是通过 JavaScript。但请记住，如果您想在新页面中编辑表格（因为您不会收到 GridView，您将收到 html），那么您将很难选择此选项。好消息是您可以轻松打开一个新页面：

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

$(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-to-print 并在该页面onload上调用 window.print() ，如上所述。

于 2012-06-11T00:16:23.490 回答