Hi, I need to print a receipt for a payment. I've designed the receipt and is working fine. But when i take the print, all my designs gone somewhere..! :roll:
I'll show you my code..
printModal.cshtml
<div class="col-md-12 ">
<div class="well col-md-12 margintop">
<div id="printThisElement">
<div class="row">
<div class="row text-center col-md-12 hidden-print ">
<img src="~/img/logo.png">
</div>
<div class="visible-print-block" style="text-align:center;">
<p> <img src="~/img/logo.png"></p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 hidden-print">
<div class="floatL">
<table class="table" border="0">
<tbody>
<tr class="row">
<td>@L("AdmissionNo")</td>
<td>: {{vm.paymentdetails.admissionNo}}</td>
</tr>
<tr class="row">
<td>@L("Name"):</td>
<td>: {{vm.paymentdetails.name}}</td>
</tr>
<tr class="row">
<td>@L("Class"):</td>
<td>: {{vm.paymentdetails.class}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 visible-print-block">
<div class="">
<table class="visible-print-block" border="0">
<tbody>
<tr class="row">
<td>@L("AdmissionNo"):</td>
<td>{{vm.paymentdetails.admissionNo}}</td>
</tr>
<tr class="row">
<td>@L("Name"):</td>
<td>{{vm.paymentdetails.name}}</td>
</tr>
<tr class="row">
<td>@L("Class"):</td>
<td>{{vm.paymentdetails.class}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 visible-print-block">
<div class="">
<table class="visible-print-block" border="0">
<tr class="row">
<td>@L("TransactionId"):</td>
<td>{{vm.paymentdetails.transationId}}</td>
</tr>
<tr class="row">
<td>@L("Order Reference No"):</td>
<td>{{vm.paymentdetails.orderRefNo}}</td>
</tr>
<tr class="row">
<td>@L("Date"):</td>
<td>{{vm.paymentdetails.transactionDateTime | date:'dd-MM-yyyy'}}</td> @*Changed by Robin creationTime*@
</tr>
</table>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 text-right hidden-print">
<div class="table-responsive floatR">
<table class="table" border="0">
<tr>
<td class="floatL"><span>@L("TransactionId")</span></td>
<td>:</td>
<td><span>{{vm.paymentdetails.transationId}}</span></td>
</tr>
<tr>
<td class="floatL"><span>@L("Order Ref. No")</span></td>
<td>:</td>
<td><span>{{vm.paymentdetails.orderRefNo}}</span></td>
</tr>
<tr>
<td class="floatL"><span>@L("Date")</span></td>
<td>:</td>
<td><span>{{vm.paymentdetails.transactionDateTime | date:'dd-MM-yyyy'}}</span></td> @*Changed by Robin creationTime*@
</tr>
</table>
</div>
</div>
<div class="row hidden-print">
<div class="col-md-12 cleardiv">
<div class="text-center margin0auto row">
<h1>Receipt</h1>
</div>
<hr>
</div>
</div>
<div class="row visible-print-block">
<br />
<div class="" style="width:250px">
<div class="text-center margin0auto" style="margin:0 auto">
<h1>Receipt</h1>
</div>
<hr />
</div>
</div>
<div class="row">
<div class="">
<table class="table table-responsive tableWidth">
<tr class="row">
<td><div class="col-xs-6 col-sm-6 col-md-6"><strong>Fees</strong></div></td>
<td><div class="col-xs-6 col-sm-6 col-md-6"><strong>Amount</strong></div></td>
</tr>
<tr class="row">
<td><div class="col-xs-6 col-sm-6 col-md-6">Fees</div></td>
<td><div class="col-xs-6 col-sm-6 col-md-6">{{vm.paymentdetails.amount}}</div></td>
</tr>
<tr class="row">
<td><div class="col-xs-6 col-sm-6 col-md-6"><strong>Amount Paid: </strong></div></td>
<td><div class="col-xs-6 col-sm-6 col-md-6"><strong>{{vm.paymentdetails.amount}}</strong></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<button class="btn btn-success btn-lg btn-block" ng-print print-element-id="printThisElement">
<i class="fa fa-print"></i>
PRINT
</button>
</div>
style.css
@media print
{
/**{
display:none;
}*/
.floatR {
float: right !important;
}
.printwidth {
width: 100% !important;
clear:both !important;
}
}
The style classes are not working in the print. But when I used the
- { display:none; } the print preview displays nothing. That means, the style sheet is loading at the time of print, but not the classes inside the sheet!.
I've used chrome to get the print preview.
Actually what could be the problem??
5 Answer(s)
-
0
Hi,
As I can see, you use only floatR class defined by you and it's container has a class hidden-print. Because of that, it will not be visible in print preview.
I suggest you to use one of metronic's invoice templates like this one <a class="postlink" href="http://keenthemes.com/preview/metronic/theme/admin_4_material_design/page_general_invoice.html">http://keenthemes.com/preview/metronic/ ... voice.html</a> and it's css. As you can see, it is printing just like you see it.
-
0
Hi,
I've used metronic's invoice templates like u suggested. But when I click in the print button, a print preview form is opened. But nothing is there in the preview. I think the window.print() method is not working in angular. Is there any additional scripts needed?
-
0
Hi,
window.print should work actually. Do you have this code in the project you shared with us ? If so, we can take a look at it.
By the way, do you have any js errors ?
-
0
Hi, I'm really sorry about it. First I was used ng-print library for printing the page. One of it's style class contained display:none for @media print :roll: That was the issue. And thanks for your help :)
-
0
Hi,
Thank you for sharing your solution, sometimes it is really hard to find such kind of stuff.
