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
更改class
至id
选项 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/