Open cjorasch opened 4 years ago
Are there any updates or plans to support printing by css @media print
of more than one page?
@martinmitteregger, @cjorasch
I have successfully achieved printing more than one full page by doing the following:
Changing the App.vue template to
<template>
<ion-router-outlet />
</template>
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;
}
}
Making sure my printable content follows the proper guidelines, no overflow hidden, etc.
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
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!
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;;
}
}
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!
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:
Describe Preferred Solution It should be possible to print across multiple pages.
Use
@media print
settings to changing scrolling behavior during printing.