Clever Geek Handbook

How to print a web page in ionic view

I am using Ionic Framework for my web app. Each page is displayed using an ion. I want to print a 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>
    <a href="javascript:window.print()" class="button button-success" style="margin-bottom:20px;">Print</a>
</ion-content>

I am using Chrome browser. When I press the print button it returns

"print preview failed.

How do I print this page?

+3


source to share


2 answers


I managed 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 this works; I just know this works for me and I hope it helps someone else as well!

0


source


I know I might be a little late to the party, but I hope this helps others in the future.

The solution to this problem is to overwrite the styles of the standard ionic component.

In default values, some properties can interrupt our print preview, for example: position, height, overflow .

Please remember that for printing:

  • height: 100%

    ,
  • position: fixed/absolute/relative

    (in some cases),
  • overflow: hidden

    ,


- the last nail in the coffin.

None of the containers should install them.

For position you can use static, for height

use fixed values

or just leave the parameter auto

. Always remember to install overflow: visible

. Otherwise, the thing we want to print may be hidden.

You can also read my short article to get more in-depth knowledge of printing ion based applications: http://blog.primemodule.com/print-style-sheets-in-ionic-framework/

0


source






More articles:


All Articles