Main page content
<div class="row">
<div class="col-md-3">
link 1
link 2
link 3
.
.
.
</div>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
Clicking a link on the main page will load the child page in ng-view.
<table class='table table-bordered'>
<tr>
<td>
This is the screen view.
When a user clicks a link on the parent page, specific content is loaded here.
</td>
</tr>
</table>
<button type="button" class="btn btn-success btn-md" ng-click="myprint()" >
<span class="glyphicon glyphicon-print"></span> Print
</button>
<div id ="printsection">
<table style="width:80mm;">
<tr style="text-align: center;">
<td>This is the print view contents.
These contents will be sent to the printer when printing.
</td>
</tr>
</table>
</div>
The child page consists of two sections - screen view and print section.
Upon clicking the print button, the content from the print section will be sent to the printer.
CSS rules defined for media print:
print.css
body {
background-color: white;
color: black;
font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
visibility: hidden;
}
#printsection * {
visibility: visible;
}
#printsection {
position: absolute;
left: 0;
top: 0;
}
The issue is that upon clicking the print button, all contents, including the print section, are being hidden.
Please note that an 80mm width POS printer is being used, hence the width set to 80mm in the print section.