#c# #javascript #html #asp.net
#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>
Комментарии:
1. Вам следует подумать о переформатировании блоков кода …
Ответ №1:
В вашем javascript вы ищете div с идентификатором widget-content
ваш код: var divToPrint = document.getElementById('widget-content');
но в вашем html у вас есть <div class="widget-content"> и у него нет идентификатора, у него есть только класс.
Итак, у вас есть 2 варианта.
ВАРИАНТ 1
Изменить class на id
ВАРИАНТ 2
Измените свой javascript для поиска класса следующим образом
var divToPrint = document.getElementsByClassName('widget-content')
ПРИМЕЧАНИЕ: это вернет массив элементов с этим классом, независимо от того, есть ли только один или несколько.
Итак, чтобы выбрать тот, который вы хотите; предполагая, что с этим классом есть только 1 div, вы делаете так:
var divToPrint = document.getElementsByClassName('widget-content')[0]
Комментарии:
1. Аналогичная проблема здесь.. Мой печатный контент на панели, а не в div. Ошибки нет, но печать невозможна.. предложите мне