feat: Ability to print more than 1 page of content

[cjorasch]

Feature Request

Ionic version: [x] 5.0.0-beta.0

Describe the Feature Request If you print a page that contains more content than will fit on a single printed page then only one page will be printed and a scroll bar will be printed on that page. The content will be clipped to the single page.

Use cases:

• Printing long lists
• Document oriented content (e.g. Stencil docs site)

Describe Preferred Solution It should be possible to print across multiple pages.

Use @media print settings to changing scrolling behavior during printing.

[martinmitteregger]

Are there any updates or plans to support printing by css @media print of more than one page?

[ugenu]

@martinmitteregger, @cjorasch

Possible solution

I have successfully achieved printing more than one full page by doing the following:

1. Changing the App.vue template to

<template>
  <ion-router-outlet />
</template>

2. Adding these @media print css styles

@media print {
  body {
    position: initial!important;
    max-height: initial!important;
    overflow: auto!important;
  }

  ion-router-outlet {
    overflow: auto!important;
    contain: none!important;
    position: initial!important;
  }
}

3. Making sure my printable content follows the proper guidelines, no overflow hidden, etc.

Result

Here is the result: surpasses my expectations and looks just as amazing online as it does in pdf

Print testing was doing via html-pdf-node

Explanation

ion-app, ion-page, ion-content uses shadow elements and containing styles, by using a bare-bones layout we can skip the headache. There may be other css styles to get those elements to render properly, but this is good enough for my solution!

[brainboutique]

In case anyone faces similar issue: On Angular I had to add following to global.scss to make it print acceptable - see the add-on on ion-content:

@media print {
  .ion-page {
    display: initial !important;
    position: initial !important;
  }
  body {
    position: initial !important;
    max-height: initial !important;
    overflow: auto !important;
  }
  ion-router-outlet {
    overflow: auto !important;
    contain: none !important;
    position: initial !important;
  }
  ion-content {
    --offset-bottom: unset !important;
    display: unset !important;;
    position: unset !important;;
  }
}

[Gkleinereva]

I couldn't get @brainboutique's solution to work in our application that uses <ion-tabs> elements to support tabbed navigation. I would love it if anyone has suggestions for adapting it!

It would be awesome if Ionic could incorporate more accommodating print styles into their inbuilt components by default!