How to print a web page in ion-view - angularjs

Question

I am using Ionic Framework for my web application. Each page is displayed using ion-view. I want to print graph (or save it as pdf).
Here is my code,
<ion-view title="Report">
<ion-nav-buttons side="right">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<b style="padding:10px;">Patient Background Report</b>
<div class="text-center item"><canvas id="line" class="chart chart-line" data="agedata" colours="colours"labels="labels" legend="true" series="series" click="onClick">
</canvas>
<b>Age</b>
</div>
Print
</ion-content>
I using Chrome-browser. When I click on print button , it returns
"print preview failed".
How to print this page?

Answer 1

I was able to get my Ionic app to print by adding the following CSS:
#media print {
.scroll-content {
position: relative;
}
.pane {
position: initial;
}
}
Don't ask me why that works; I just know that it works for me, and I hope it also helps someone else!

Answer 2

I know that i might be a little bit late to the party but I hope that this would help others in future.
The solution for this problem is to overwrite default ionic components styling.
In defaults, some properties could broke our print preview like: position, height, overflow.
It's a must to remember that for printing:
height: 100%,
position: fixed/absolute/relative (in some cases),
overflow: hidden,
are 'the last nail in the coffin'.
None of container should have them set.
For position you can use static, for height use fixed values or just leave an auto option. Always remember to set overflow: visible. Otherwise the thing we want to print could be hidden.
You can also read my short article in order to have a more in depth knowledge on printing ionic based applications: http://blog.primemodule.com/print-style-sheets-in-ionic-framework/