javascript - 如何在 asp.net 中使用 JavaScript 只打印表数据元素？

Question

我想打印特定的表数据元素。

表结构如下。

| Table No | Table Code | Description | Action |
     4           8785        abc         Print
     5           7463        cde         Print
     6           5645        fgh         Print

当我单击“打印”链接时，我想仅打印一行的前两列(表号、表代码)的元素。

下面的 JavaScript 代码打印整行。

<script type="text/javascript">
    function Print(a) {
        alert("heloo");
        var row = $(a).closest("tr").clone(true);
        var printWin = window.open('', '', 'left=0", ",top=0,width=1000,height=600,status=0');
        var table = $("[id*=tableCodeTable]").clone(true);
        $("tr", table).not($("tr:first-child", table)).remove();
        table.append(row);
        $("tr td:last,tr th:last", table).remove();
        var dv = $("<div />");
        dv.append(table);
        printWin.document.write(dv.html());
        printWin.document.close();
        printWin.focus();
        printWin.print();
        printWin.close();
    }
</script>  

打印链接的html代码

<a href="javascript:;" onclick="Print(this)">Print</a>

表格的html代码

<table border="2px" id="tableCodeTable" class="table">
  <tr>
        <th>
            Table No
        </th>
        <th>
            Table Code
        </th>
        <th>
            Description
        </th>         
        <th>
            Action
        </th>
    </tr>
    <tbody>
 <% foreach (var item in Model.Mapping)
 {%>   
   <tr id="<%=item.Id%>">

        <td id="no_<%=item.Id%>" class="two">
             <input type="hidden" value=" <%=item.Id%>"/>
            <%=item.TableNo%>
        </td>
        <td>
            <%=item.TableCode%>
        </td>
      <td id="dc_<%=item.Id%>" class="twoo"> 
           <%=item.Description%>
       </td>          
        <td>      
             <a href="javascript:;" onclick="Print(this)">Print</a>
        </td>
  </tr>            
 <% } %>
 </tbody>   
</table>

如何只打印这两个元素？请帮忙。

Answer 1

有两种方法可以做到这一点:

1. 创建一个单独的 CSS 样式表，仅显示您想要打印的内容。其余设置为 display: none;

   使用 media="print" 链接该 CSS。因此，它仅在打印时使用。对于其余列和其他 HTML 元素，在此 CSS 中设置 display: none;。它将自动应用。

2. 另一种方法是使用 window.open() 打开一个新窗口，该窗口仅显示您想要打印的内容，并在之后调用 window.print()一个不错的超时，比如 100 毫秒。以便在启动打印过程之前正确加载数据。

您可以使用另一种方法，这甚至更简单。不使用 setTimeOut 进行打印

var prnWin = window.open(somePath);
prnWin.onload = function() {
    prnWin.print();
};

There could be other ways too to accomplish what you want to do. But I think the 1st approach mentioned by me would work best for you.