在ASP.net中用css样式打印div及其内容c#

时间:2014-06-28 18:03:20

标签: c# javascript html css asp.net

您好我的ASP Dot Net c#网站我有一个html报告就在那里。现在我想要打印出相同的内容。所以我使用Javascript,它只显示内容作为原始信息。所以我怎样才能显示内容及其css。

的Javascript

<script type="text/javascript">

        function PrintDiv() {
            var divToPrint = document.getElementsByClassName('widget-content')[0];
            var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
            popupWin.document.open();
            popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
            popupWin.document.close();
        }


         </script>

按钮单击

<input type="button" onclick="PrintDiv()" value="Print" />

HTML内容

 <div class="widget-content">
                    <div class="invoice-content">
                        <div class="invoice-head">
                            <div class="invoice-meta">
                                <%--Invoice <span class="invoice-number">#96558 </span><span class="invoice-date">Date:
                                    2012-07-15</span>--%>
                            </div>
                            <h5 style="margin-left: 40%; height: 20px; font-size: large">
                                Order Form</h5>
                            <div class="invoice-to">
                                <ul>
                                    <li><span>Booking Date:<asp:Label ID="dispbookingDate" runat="server"></asp:Label></span>
                                        <span>Name<asp:Label TextMode="MultiLine" runat="server" ID="dispName"></asp:Label></span>
                                        <span>Address:<asp:Label TextMode="MultiLine" runat="server" ID="dispAddress"></asp:Label></span>
                                    </li>
                                </ul>
                            </div>
                            <div class="invoice-from">
                                <ul>
                                    <li><span>Order No.<asp:Label ID="dispOrderNo" runat="server"></asp:Label></span> <span>
                                        Wedding Date:<asp:Label runat="server" ID="dispWeddingDate"></asp:Label></span>
                                        <span>Malayalam Date:<asp:Label runat="server" ID="dispWeddingMalayam"></asp:Label></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <table class="table table-bordered table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th class="style1">
                                            Description
                                        </th>
                                        <th class="style2">
                                            Rs.
                                        </th>
                                        <th>
                                            Ps.
                                        </th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th class="total-label" colspan="2">
                                            Total:
                                        </th>
                                        <th class="total-amount">
                                            <asp:Label ID="dispTotal" runat="server"></asp:Label>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th class="total-label" colspan="2">
                                            Adavance:
                                        </th>
                                        <th class="total-amount">
                                            <asp:Label ID="dispAvance" runat="server"></asp:Label>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th class="total-label" colspan="2">
                                            Balance:
                                        </th>
                                        <th class="total-amount">
                                            <asp:Label ID="dispBalance" runat="server"></asp:Label>
                                        </th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td class="style1">
                                            Auditorium Rent
                                        </td>
                                        <td class="style2">
                                            <asp:Label ID="dispRent" runat="server"></asp:Label>
                                        </td>
                                        <td>
                                            <asp:Label ID="Label2" runat="server"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Dining Hall Rent
                                        </td>
                                        <td class="style2">
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Kathir Mandapam
                                        </td>
                                        <td class="style2">
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Tables and chairs
                                        </td>
                                        <td class="style2">
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Electricity charge for water
                                        </td>
                                        <td class="style2">
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Luxuary Tax
                                        </td>
                                        <td class="style2">
                                            <asp:Label ID="dispLTax" runat="server"></asp:Label>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            Central Service Tax
                                        </td>
                                        <td class="style2">
                                            <asp:Label ID="dispCTax" runat="server"></asp:Label>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                      <%--  <p class="amount-word">
                            Amount in Word: <span>
                                <asp:Label ID="dispAmountWord" runat="server"></asp:Label></span>
                        </p>--%>
                    </div>
                     <input type="button" onclick="PrintDiv()" value="Print" />
                </div>

2 个答案:

答案 0 :(得分:4)

你试过了吗?

popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</html>');

编辑:我猜你也应该关闭这一行的正文标记

popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');

答案 1 :(得分:2)

您的代码应该是这样的:     

    function PrintDiv() {
        var divToPrint = document.getElementsByClassName('widget-content')[0];
        var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
        popupWin.document.open();
        popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
        popupWin.document.close();
    }
     </script>

你必须只使用一个document.write()然后它肯定会工作尝试....:D