如何使用 Ctrl+P 打印中继器数据？答案

【问题标题】：How to print repeater data using Ctrl+P?如何使用 Ctrl+P 打印中继器数据？
【发布时间】：2020-07-29 12:23:18
【问题描述】：

<asp:Repeater ID="RptStock" runat="server" OnItemCommand="RptStock_ItemCommand">
    <ItemTemplate>
        <tr class="spacer"></tr>
        <tr class="tr-shadow text-center">
            <td><%# (Container.ItemIndex + 1).ToString() %></td>
            <td>
                <asp:Label ID="lblSKU" runat="server" Text='<%# Bind("Product_SKU") %>' CssClass="form-control-label"></asp:Label>
            </td>
            <td>
                <asp:Label ID="lblQuantity" runat="server" Text='<%# Bind("Product_Quantity") %>' CssClass="form-control-label"></asp:Label>
            </td>
            <td>
                <asp:Label ID="lblSold" runat="server" Text='<%# Bind("Sold") %>' CssClass="form-control-label"></asp:Label>
            </td>
            <td>
                <asp:Label ID="lblLeft" runat="server" Text='<%# Bind("Remaining") %>' CssClass="form-control-label"></asp:Label>
            </td>
       </tr>
   </ItemTemplate>
</asp:Repeater>

我想使用 Ctrl+P 命令打印转发器中绑定的数据。其次，如果转发器有 5 列，我们可以只打印 4 列吗？

function printDiv(printdivcontent) {
        var printContents = document.getElementById(printdivcontent).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        $('td:nth-child(8), th:nth-child(8), td:nth-child(7)').hide();
        $('td:nth-child(9),th:nth-child(9)').hide();
        $('td:nth-child(10),th:nth-child(10)').hide();
        $('td:nth-child(11),th:nth-child(11)').hide();
        $('td:nth-child(12),th:nth-child(12)').hide();
        window.print();
        document.body.innerHTML = originalContents;

我尝试了这段代码，但是当我关闭打印对话框时，父页面按钮不起作用。但是，如果我刷新页面，按钮就会开始工作。为什么？

【问题讨论】：

标签： c# jquery asp.net printing repeater

【解决方案1】：

您可以使用 Javascript 来打印页面的内容。这是类似查询的答案 (https://stackoverflow.com/a/18442010/9305527)。如果您想打印页面的特定部分，那么以下教程可能会有所帮助 Print a specific div using Javascript。

假设您不想打印最后一列。试试这个：

function printColumns()
{  
    var col1=document.querySelectorAll("#lblSKU");
    var col2=document.querySelectorAll("#lblQuantity");
    var col3=document.querySelectorAll("#lblSold");
    var printWindow = window.open('', '', 'height=500,width=500');  
    printWindow.document.write('<html><head><title>Table Content</title>');  
    printWindow.document.write('</head><body >');
    for(var i=0;i<col1.length;i++)
    {
    printWindow.document.write("<label>Label 1:"+col1[i].innerText+"<label></br>");
    printWindow.document.write("<label>Label 2:"+col2[i].innerText+"<label></br>");
    printWindow.document.write("<label>Label 3:"+col3[i].innerText+"<label></br>");  
    }
    printWindow.document.write('</body></html>');  
    printWindow.document.close();  
    printWindow.print();
}

添加一个打印按钮并将此函数附加到 onClick 属性。

【讨论】：

我检查了这两个选项。 Windows.print() 命令不仅获取转发器数据，还获取转发器上方的搜索栏。而特定的 div 显示单个页面上的所有记录，并且对齐受到干扰。而且我看不到任何跳过 1 列的选项。如何跳过专栏？
我在最初的答案中添加了一个代码示例。希望它能按照您的要求工作。
感谢您的帮助。我对 jquery 不太熟悉，因此根据 asp.net 使用上述代码时遇到了麻烦。我搜索并发现这种方式可以隐藏 jquery 中的列。 $('td:nth-child(8),th:nth-child(8)').hide();
太好了。很高兴能帮上忙。