打印div而不打开额外的弹出窗口

时间:2018-10-08 07:59:12

标签: javascript jquery

我有一个GridView,在最后一列中有一个打印按钮

<asp:LinkButton ID="lnkPrint" runat="server" Text="Print" OnClientClick="OnPrintClick(this);" OnClick="lnkPrint_Click"></asp:LinkButton>

function OnPrintClick(lnk)
{
    var row = lnk.parentNode.parentNode;        
    var userId = row.cells[0].innerHTML;      
    $('[id$=hdnPrintUserId]').val(userId);

    $('#<%=lblPrintIdNumber.ClientID %>').val("");
    $('#<%=lblPrintName.ClientID %>').val("");
    $('#<%=lblPrintAge.ClientID %>').val("");       

    $("#idPrint").show();
}

单击它会打开一个弹出窗口,其中显示用户信息:

<asp:Panel id="pnlPrintContents" runat = "server">
  <div id="idPrint" class="nicePanel panel panel-primary" style="display:none; position:absolute;left:10%;top:10%;margin-top:25px;">
    <div style="border-bottom:1px solid #ddd;overflow:auto">
      <div style="display:inline-block;padding:15px;width:280px;vertical-align:top;border-right:1px solid #eee;">
        <div>   
          <div>
            <asp:Label ID="Label3" runat="server" Text="Profile Photo"></asp:Label> </div>
          <div>
            <asp:Image style="max-height:100px;max-width:100px;" ID="profileImage" runat="server" />                
          </div>
          <hr />
        </div>
        <div>
          <div>
            <asp:Label ID="lblIdNumber" runat="server" Text="Identification Number"></asp:Label> </div>
          <div>
            <asp:Label ID="lblPrintIdNumber" runat="server"></asp:Label> </div>
        </div>
        <div>
          <div>
            <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label> </div>
          <div><asp:Label ID="lblPrintName" runat="server"></asp:Label> </div>        
        </div>
        <div>
          <div>
          <asp:Label ID="lblAge" runat="server" Text="Age"></asp:Label></div>
          <div><asp:Label ID="lblPrintAge" runat="server"></asp:Label>        
          </div>
        </div>
      </div>       
    </div>          
  </div>
</asp:Panel>

在单击按钮后面的代码中,我从数据库中获取数据并在各个控件中设置值。

要做的事情: 我想显示带有打印对话框的弹出窗口,即它将显示带有详细信息的弹出窗口和一个用于打印弹出内容的打印对话框。我检查了网,发现它也打开了带有可打印内容的弹出窗口,如下所示:

function PrintPanel() {
    var panel = document.getElementById("<%=pnlPrintContents.ClientID %>");
    var printWindow = window.open('', '', 'height=400,width=800');
    printWindow.document.write('<html><head><title>DIV Contents</title>');
    printWindow.document.write('</head><body >');
    printWindow.document.write(panel.innerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    setTimeout(function () {
    printWindow.print();
    }, 500);
    return false;
}

我只想显示我的弹出窗口,而不想写window.open(..)。

是否有可能在“打印”按钮上单击以将其div内容显示为带有打印对话框的弹出窗口,并且仅打印div内容?

0 个答案:

没有答案