Question

我有一个网页，其中包含一个包含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>

Answer 1

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

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

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

1 个答案: