如何在asp.net中使用JavaScript打印表数据元素?

时间:2013-10-04 06:22:58

标签: javascript html asp.net asp.net-mvc

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

表结构如下。

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

如何打印这两个元素?请帮助。

1 个答案:

答案 0 :(得分:0)

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

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

    将CSS与media="print"相关联。因此,它仅在打印时使用。对于此CSS中的其他列和其他HTML元素集display: none;。它会自动生效。

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

  3. 您可以使用另一种方法,这更简单。不使用setTimeOut打印

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

    还有其他方法可以完成你想要做的事情。但我认为我提到的第一种方法最适合你。