How to print a web page in ion-view

ionic-v1
1

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).

My code is

<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>
    <a href="javascript:window.print()" class="button button-success" style="margin-bottom:20px;">Print</a>
</ion-content>
</ion-view>

In Chrome Browser when I click on print button it returns,

"print preview failed".

How to print this page?

2 Likes
2

Have you solved the problem?

3

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!

4

Finally solved. I had to remove the ion-side-menu tag too. It gave my problems for printing. Regards

5

Having same issue how did you work around it?

1 Like
6

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 deph knowledge on printing ionic based applications: http://blog.primemodule.com/print-style-sheets-in-ionic-framework/