c# - 如何在 ASP.NET C# 中打印 div

标签 c# javascript html asp.net

Net c# 网站上有一个 html 报告。现在我想打印该报告。所以我使用了 Javascript,它只显示弹出框,而不显示内容。如何解决这个问题。

Javascript

<script type="text/javascript">
        function PrintDiv() {
            var divToPrint = document.getElementById('widget-content');
            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>

最佳答案

在您的 JavaScript 中,您正在搜索 id 为 widget-content 的 div

您的代码:var divToPrint = document.getElementById('widget-content');

但是在你的html中你有 <div class="widget-content">它没有 id,只有一个类。

所以你有两个选择。

选项 1

更改classid

<小时/>

选项 2

更改您的 JavaScript 以像这样搜索类

var divToPrint = document.getElementsByClassName('widget-content')

注意:这将返回具有该类的元素数组,无论只有一个还是多个。

所以为了选择你想要的;假设这个类只有 1 个 div,你会这样:

var divToPrint = document.getElementsByClassName('widget-content')[0]

关于c# - 如何在 ASP.NET C# 中打印 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24464827/

相关文章:

c# - 使用 NUnit 和 C# 对异步方法进行单元测试

c# - 我应该使用结构而不是类来在 C# 中保存仅字符串数据吗?

javascript - 这些代码行在某种意义上是相等的吗?

javascript - 当某个元素为 "active"时如何设置文本颜色

jquery - 悬停显示闪烁jquery

javascript - 制作自定义CSS规则

c# - 具有相同签名的委托(delegate)

c# - WPF:当 IsEnabled=false 时获取 MouseEnter 事件

javascript - Javascript 的 Date 对象依赖于用户的浏览器吗?

html - 我想知道如何使导航中的所有元素均匀分布