window.print（）在請求的頁面之前打印6個空白頁面

我有一個包含帶有7個選項卡的菜單欄的網頁。在菜單欄下面是一個打印按鈕，它調用javascript window.prin（）函數。但是，每次按下此按鈕時，將打印全部7個選項卡的頁面。有什麼方法可以確切地指定要打印哪個頁面？window.print（）在請求的頁面之前打印6個空白頁面

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DistEducation.aspx.vb" Inherits="Periscope.DistEducation" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>DistEducation</title> 

    <%--Added the following three scripts for the TableSorter--%> 
    <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> 
    <script type="text/javascript" src="../Scripts/jquery.tablesorter.min.js"></script> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $("#grdTraining").tablesorter(); 
     }); 
     $(document).ready(function() { 
      $("#grdExpTraining").tablesorter(); 
     }); 
     $(document).ready(function() { 
      $("#grdProduct").tablesorter(); 
     }); 
     $(document).ready(function() { 
      $("#grdExpProd").tablesorter(); 
     }); 

     function GridChanger() { 
      var linker = document.getElementById("expTrainingShow"); 
      var grid = document.getElementById("expTraining"); 

      if ((grid != null) & (linker != null)) { 
       if (linker.innerHTML == "+ Show Expired Continuing Education") { 
        grid.style.display = "block"; 
        linker.innerHTML = "- Hide Expired Continuing Education"; 
       } 
       else { 
        grid.style.display = "none"; 
        linker.innerHTML = "+ Show Expired Continuing Education"; 
       } 
      } 

     } //end GridChanger 

     function GridChangerProd() { 
      var linker = document.getElementById("expProdShow"); 
      var grid = document.getElementById("expProd"); 

      if ((grid != null) & (linker != null)) { 
       if (linker.innerHTML == "+ Show Expired Product Training") { 
        grid.style.display = "block"; 
        linker.innerHTML = "- Hide Expired Product Training"; 
       } 
       else { 
        grid.style.display = "none"; 
        linker.innerHTML = "+ Show Expired Product Training"; 
       } 
      } 

     } //end GridChangerProd 


     function doPrint() { 
      window.print(); 
     } 
    </script> 

    <LINK href="../Stylesheets/Default.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <table width="100%"> 
      <tr> 
       <td width="70%" align="left"></td> 
       <td width="25%" align="right"><asp:label id="lblTime" Runat="server" CssClass="clsLabelStatus"></asp:label></td> 
       <td width="5%" align="right"><input id="cmdPrint" title="Print" onclick="doPrint();" type="button" value="Print" name="cmdPrint"></td> 
      </tr> 
     </table> 

    <div style="margin-left: 0px"> 
    <br /> 
<%-- <h2 style="background-position: center; background-color: #CCCCCC; font-family: Arial, Verdana, sans-serif; color: #000000; text-align: left; width: 100%;">Training and Continuing Education</h2>--%> 
<%--  <asp:Label ID="TempMessage" runat="server" Font-Bold="True" Font-Size="Large" 
      ForeColor="Red" Text="This tab will display Agent training in the near future."></asp:Label>--%> 
     <h1 class="clsSectionBar" width: 100%;" 
      style="font-size: small; height: 20px; vertical-align: middle;">Continuing Education</h1> 
     <asp:Label ID="UserMessage" runat="server" Text="" CssClass="clsLabel"></asp:Label> 
     <br /> 
     <span id="expTrainingShow" class="clsLink" style="margin-left: 20px;" runat="server" onclick="GridChanger();"> 
      + Show Expired Continuing Education</span> 


     <div id="expTraining" style="display:none;"> 
      <asp:GridView 
       AllowSorting="True" 
       ID="grdExpTraining" 
       runat="server" BackColor="White" BorderColor="White" 
       BorderWidth="3px" CellPadding="2" Width="98%" AutoGenerateColumns="False" 
       HorizontalAlign="Center" Font-Names="Arial" 
       style="margin-top: 0px" HeaderStyle-ForeColor="White"> 
       <RowStyle ForeColor="Black" />    
       <Columns> 

        <asp:BoundField DataField="StateCode" HeaderText="State" 
         SortExpression="StateCode"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="CourseDesc" HeaderText="Course" 
         SortExpression="CourseDesc"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="Hours" HeaderText="Hours" SortExpression="Hours"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="EffectiveDate" HeaderText="Effective" 
         SortExpression="EffectiveDate" DataFormatString="{0:d}"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="ExpirationDate" HeaderText="Expiration" 
         SortExpression="ExpirationDate" DataFormatString="{0:d}"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

       <%--<asp:BoundField DataField="Notes" HeaderText="Notes" 
         SortExpression="Notes"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" Width="200" /> 
        </asp:BoundField> Commented out until further notice (Neal Rodruck 7/26/12)--%> 

        <asp:BoundField DataField="LastChange" HeaderText="Last Chg" 
         SortExpression="LastChange" DataFormatString="{0:d}"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" Width="145" /> 
        </asp:BoundField> 

       </Columns> 
       <FooterStyle BackColor="White" ForeColor="#000066" /> 
       <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> 
       <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> 
       <HeaderStyle CssClass="clsListHeading" Font-Size="Small" /> 
      </asp:GridView> 
     </div> 

     <asp:GridView 
      AllowSorting="True" 
      ID="grdTraining" 
      runat="server" BackColor="White" BorderColor="White" 
      BorderWidth="3px" CellPadding="2" Width="98%" AutoGenerateColumns="False" 
      HorizontalAlign="Center" Font-Names="Arial" 
      style="margin-top: 0px" HeaderStyle-ForeColor="White" > 
      <RowStyle ForeColor="Black" />    
      <Columns> 

       <asp:BoundField DataField="StateCode" HeaderText="State" 
        SortExpression="StateCode"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="CourseDesc" HeaderText="Course" 
        SortExpression="CourseDesc"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="Hours" HeaderText="Hours" SortExpression="Hours"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="EffectiveDate" HeaderText="Effective" 
        SortExpression="EffectiveDate" DataFormatString="{0:d}"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="ExpirationDate" HeaderText="Expiration" 
        SortExpression="ExpirationDate" DataFormatString="{0:d}"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

      <%--<asp:BoundField DataField="Notes" HeaderText="Notes" 
        SortExpression="Notes"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" Width="200" /> 
       </asp:BoundField> Commented out until further notice (Neal Rodruck 7/26/12)--%> 

       <asp:BoundField DataField="LastChange" HeaderText="Last Chg" 
        SortExpression="LastChange" DataFormatString="{0:d}"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" Width="145" /> 
       </asp:BoundField> 

      </Columns> 
      <FooterStyle BackColor="White" ForeColor="#000066" /> 
      <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> 
      <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> 
      <HeaderStyle CssClass="clsListHeading" Font-Size="Small" /> 
     </asp:GridView> 
     <br /> 
     <h1 class="clsSectionBar" width: 100%;" 
      style="font-size: small; height: 20px; vertical-align: middle;" 
      id="prodInfo" >Product Training</h1> 
     <asp:Label ID="ProductMessage" runat="server" Text=""></asp:Label> 
     <br /> 

       <span id="expProdShow" class="clsLink" style="margin-left: 20px;" runat="server" onclick="GridChangerProd();"> 
      + Show Expired Product Training</span> 

     <div id="expProd" style="display:none;"> 
      <asp:GridView 
       AllowSorting="True" 
       ID="grdExpProd" 
       runat="server" BackColor="White" BorderColor="White" 
       BorderWidth="3px" CellPadding="2" Width="98%" AutoGenerateColumns="False" 
       HorizontalAlign="Center" Font-Names="Arial" 
       style="margin-top: 0px" HeaderStyle-ForeColor="White"> 
       <RowStyle ForeColor="Black" />    
       <Columns> 

        <asp:BoundField DataField="Partner" HeaderText="Partner" 
         SortExpression="Partner"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="ProductDesc" HeaderText="Product" 
         SortExpression ="ProductDesc"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="DateTaken" HeaderText="Date Taken" 
         SortExpression="DateTaken" DataFormatString="{0:d}"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="DateExpired" HeaderText="Date Expired" 
         SortExpression="DateExpired" DataFormatString="{0:d}"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="CourseDesc" HeaderText="Course" 
         SortExpression="CourseDesc"> 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

        <asp:BoundField DataField="Status" HeaderText="Status" 
         SortExpression="Status" > 
         <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
        </asp:BoundField> 

       </Columns> 
       <FooterStyle BackColor="White" ForeColor="#000066" /> 
       <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> 
       <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> 
       <HeaderStyle CssClass="clsListHeading" Font-Size="Small" /> 
      </asp:GridView></div> 

     <asp:GridView 
      AllowSorting="True" 
      ID="grdProduct" 
      runat="server" BackColor="White" BorderColor="White" 
      BorderWidth="3px" CellPadding="2" Width="98%" AutoGenerateColumns="False" 
      HorizontalAlign="Center" Font-Names="Arial" 
      style="margin-top: 0px" HeaderStyle-ForeColor="White" > 
      <RowStyle ForeColor="Black" /> 
      <Columns> 

       <asp:BoundField DataField="Partner" HeaderText="Partner" 
        SortExpression="Partner"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="ProductDesc" HeaderText="Product" 
        SortExpression ="ProductDesc"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="DateTaken" HeaderText="Date Taken" 
        SortExpression="DateTaken" DataFormatString="{0:d}"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="DateExpired" HeaderText="Date Expired" 
        SortExpression="DateExpired" DataFormatString="{0:d}"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="CourseDesc" HeaderText="Course" 
        SortExpression="CourseDesc"> 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

       <asp:BoundField DataField="Status" HeaderText="Status" 
        SortExpression="Status" > 
        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Font-Size="Small" /> 
       </asp:BoundField> 

      </Columns> 
      <FooterStyle BackColor="White" ForeColor="#000066" /> 
      <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> 
      <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> 
      <HeaderStyle CssClass="clsListHeading" Font-Size="Small" /> 
     </asp:GridView> 
     &nbsp;&nbsp;&nbsp;&nbsp;</div> 
    </form> 
</body> 
</html>

來源

2012-09-19 NealR

這個HTML是「所有的代碼」？因爲你不能自動地說「打印什麼頁面」，你需要使用css來找到一個好的解決方案，這樣做是必要的，看看你的整個HTML代碼。 –

考慮使用'print'樣式表來隱藏菜單欄和額外的頁面。 – nneonneo

寬度= 100％是相對於父母的大小。我們需要看到整個html，看看你爲什麼打印出這麼多頁面。 –

在我的應用程序中，我使用彈出窗口來打印頁面的一部分。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#printButton').click(function() { 
      PrintElement($('#mainContent')); 
     }); 
    }); 

    var PrintElement = function (element) { 
     Popup($(element).html()); 
    } 
    var Popup = function (data) { 
     var mywindow = window.open('', 'print_div', 'resizable=1,scrollbars=1,height=400,width=600'); 
     mywindow.document.write('<html><head><title>Print Window</title><link href="../../Includes/Styles/Global.css" type="text/css" rel="Stylesheet" />'); 
     mywindow.document.write('</head><body><div id="mainMasterDiv">'); 
     mywindow.document.write(data); 
     mywindow.document.getElementById("printButton").style.display = "none"; 
     mywindow.document.write('</div></body></html>'); 
     mywindow.document.close(); 
     mywindow.print(); 
     return true; 
    } 
</script>

一旦打印按鈕用戶點擊，我通過resultDetailsDiv到PrintElement功能，這將打開相同內容的彈出式窗口，打印，並關閉它。只有我必須包括使用javascript的CSS來維護div內容的佈局和樣式。 Popup函數是用Javascript編寫的，你可以嘗試在Jquery中編寫函數，這可以減少你的代碼行。

printButton是打印的按鈕，mainContent是具有要打印的內容的div。

來源

2012-09-20 07:25:58

我對JavaScript很陌生。 printButton是你的名字嗎？如果是的話，你如何指定這個函數被調用？ – NealR

是printButton是打印按鈕的ID，我更改了Jquery獲取的代碼。這是可行的代碼，您可以替換您的打印按鈕id和mainContent div id。 –

謝謝。最後一個問題，你是否需要在按鈕的onlcick =部分放置任何東西？ – NealR

window.print（）在請求的頁面之前打印6個空白頁面

回答

相關問題