如何在ASP.NET C＃中打印div
[英]How to print a div in ASP.NET C#
问题描述
Net c# website i have an html report is there.Now i want to take a printout of the same.So i used Javascript and its showing only the popup box ,not the content.how to solve this issue. 
Net C＃网站上有一个HTML报告。现在我想打印该报告。因此，我使用Javascript，并且仅显示弹出框，而不显示content.how解决此问题。
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>
button Click 按钮点击
<input type="button" onclick="PrintDiv()" value="Print" />
HTML Content 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>
1 个解决方案
解决方案1
1 已采纳 2014-06-28 09:08:11
In your javascript you are searching for the div with id widget-content 在您的JavaScript中，您正在搜索ID为widget-content属性的div
your code: var divToPrint = document.getElementById('widget-content'); 您的代码： var divToPrint = document.getElementById('widget-content');
but in your html you have <div class="widget-content"> and it has no id, it only has a class. 但在您的html中，您具有<div class="widget-content">并且它没有ID，只有一个类。
So you have 2 options. 因此，您有2个选择。
OPTION 1 选项1
Change class to id 将class更改为id
OPTION 2 选项2
Change your javascript to search for the class like so 更改您的JavaScript来搜索此类的类
var divToPrint = document.getElementsByClassName('widget-content')
NOTE: this will return an array of elements with that class, whether theres only one or more. 注意：无论是否只有一个或多个，这都将返回该类的元素数组。
So in order to select the one you want; 因此，为了选择您想要的那个； assuming there is only 1 div with this class you do like so: 假设该类只有1个div，您可以这样做：
var divToPrint = document.getElementsByClassName('widget-content')[0]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.