Javascript print（）在请求的页面之前打印6个空页面_Javascript_Asp.net

Javascript print（）在请求的页面之前打印6个空页面

javascript asp.net

Javascript print（）在请求的页面之前打印6个空页面,javascript,asp.net,Javascript,Asp.net,我有一个包含7个选项卡的菜单栏的网页。菜单栏正下方是一个打印按钮，用于调用javascript window.prin（）函数。但是，每次按下此按钮，都会打印所有7个选项卡的页面。有没有办法精确地指定要打印的页面 <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DistEducation.aspx.vb" Inherits="Periscope.DistEducation" %> <!DOCTYPE htm

我有一个包含7个选项卡的菜单栏的网页。菜单栏正下方是一个打印按钮，用于调用javascript window.prin（）函数。但是，每次按下此按钮，都会打印所有7个选项卡的页面。有没有办法精确地指定要打印的页面

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


远程教育
$（文档）.ready（函数（）{
$（“#grdTraining”）.tablesorter（）；
});
$（文档）.ready（函数（）{
$（“#grdExpTraining”）.tablesorter（）；
});
$（文档）.ready（函数（）{
$（“#grdProduct”）.tablesorter（）；
});
$（文档）.ready（函数（）{
$（“#grdexprod”）.tablesorter（）；
});
函数GridChanger（）{
var linker=document.getElementById（“expTrainingShow”）；
var grid=document.getElementById（“expTraining”）；
if（（网格！=null）和（链接器！=null））{
如果（linker.innerHTML==“+显示过期的继续教育”）{
grid.style.display=“块”；
linker.innerHTML=“-隐藏过期的继续教育”；
}
否则{
grid.style.display=“无”；
linker.innerHTML=“+显示过期的继续教育”；
}
}
}//结束网格变换器
函数GridChangerProd（）{
var linker=document.getElementById（“expProdShow”）；
var grid=document.getElementById（“expProd”）；
if（（网格！=null）和（链接器！=null））{
if（linker.innerHTML==“+显示过期产品培训”）{
grid.style.display=“块”；
linker.innerHTML=“-隐藏过期的产品培训”；
}
否则{
grid.style.display=“无”；
linker.innerHTML=“+显示过期产品培训”；
}
}
}//结束GridChangerProd
函数doPrint（）{
window.print（）；
}


产品培训


+展示过期产品培训

在我的应用程序中，我使用弹出窗口打印页面的部分

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


$（文档）.ready（函数（）{
$（“#打印按钮”）。单击（函数（）{
打印元素（$（“#主要内容”）；
});
});
var PrintElement=函数（元素）{
弹出（$（element.html（））；
}
var Popup=函数（数据）{
var mywindow=window.open（“”，'print_div'，'resizable=1，scrollbars=1，height=400，width=600'）；
mywindow.document.write（'Print Window'）；
mywindow.document.write（“”）；
mywindow.document.write（数据）；
mywindow.document.getElementById（“printButton”）.style.display=“无”；
mywindow.document.write（“”）；
mywindow.document.close（）；
mywindow.print（）；
返回true；
}

用户单击打印按钮后，我将resultDetailsDiv传递给PrintElement函数，该函数打开一个具有相同内容的弹出窗口，打印并关闭它。我唯一需要包含的就是使用javascript的css来维护div内容的布局和样式。弹出函数是用Javascript编写的，您可以尝试用Jquery编写该函数，这样可以减少代码行

printButton是用于打印的按钮，mainContent是包含要打印内容的div。

此HTML是“所有代码”？因为你不能说“自动”什么页面打印，你需要与CSS一起找到一个好的解决方案，这样做是必要的，看看你的整个HTML代码。考虑使用<代码>打印< /代码>样式表来隐藏菜单栏和额外的页面。宽度＝100%是相对于父的大小。我们需要查看整个html，以了解为什么要打印这么多页面。刚刚添加了完整的html/javascriptI我对JavaScript非常陌生。printButton是您按钮的名称吗？如果是这样，您如何指定调用此函数？是的printButton是printButton的id，我将代码更改为get by Jquery。这是可行的代码，您可以替换您的打印按钮id和mainContent div id。谢谢。最后一个问题，您需要在按钮的onlcick=部分中添加任何内容吗？不需要，我们已经在使用jquery绑定它，如果它出现一些问题，您可以先解除绑定：$（'printButton'）。解除绑定（'click'）。绑定（'click'，function（）{PrintElement（$（'printContent'））；}）；