【问题标题】:Print a div and its content with css style in ASP.net c#在 ASP.net c# 中使用 css 样式打印 div 及其内容
【发布时间】:2014-06-28 18:03:19
【问题描述】:

你好,在我的 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>

【问题讨论】:

    标签: c# javascript html css asp.net


    【解决方案1】:

    你试过了吗:

    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>');
    

    【讨论】:

    • 你好,它很好。现在它可以工作了,但唯一的问题是它重复了文件。我的意思是当我们想从 A 点打印到 B 时......它打印两次......
    【解决方案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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-04
      • 1970-01-01
      • 1970-01-01
      • 2022-01-25
      • 1970-01-01
      相关资源
      最近更新 更多