Drucken Sie ein div-Element und dessen Inhalt mit css-Stil ASP.net c#

Hallo, in meinem ASP Dot Net c# - Webseite habe ich einen html-Bericht ist da.Jetzt möchte ich mit einem Ausdruck der gleichen.Also ich benutzt Javascript und Ihre zeigen werden nur die Inhalte als roh-Informationen.Also wie kann ich sowohl inhaltlich als auch seine 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>

Schaltfläche Klicken

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

HTML-Inhalt

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

InformationsquelleAutor A.Jacky | 2014-06-28

Schreibe einen Kommentar