search

cognitom / paper-css

Paper CSS for happy printing
https://www.npmjs.com/package/paper-css
MIT License
2.51k stars 342 forks source link

Is it possible to have it automatically create new pages once the sheet overflows? #12

Open jedallado opened 7 years ago

jedallado commented 7 years ago

Currently you'll have to define "sheet" for each page, but I am looping long list of data so I only created one sheet. The problem is after the end of the sheet the rest of the data gets hidden and not printed.

cognitom commented 7 years ago

Hi @bionets. paper-css is just a set of CSS, so we need to do pagination manually.

JulienMelissas commented 7 years ago

Hi @bionets... I know this is old, but I was able to do this pretty easily by just adding a style:

.sheet {
  overflow: visible;
  height: auto !important;
}

I was also able to avoid the browser printing half an element on one page and the other half on the next by adding page-break-inside: avoid; to the repeating items I had, in my case it was a simple div.

danilockthar commented 3 years ago

page-break-inside: avoid;

Hi, how you avoid the next page enters with no padding on top ? i try your solution but when content is too big, the next page is close to the border top of the page.

lpwm commented 3 years ago

page-break-inside: avoid;

Hi, how you avoid the next page enters with no padding on top ? i try your solution but when content is too big, the next page is close to the border top of the page.

Same issue +1

TriPSs commented 3 years ago

@lpwm @danilockthar try adding: 

@page {
   size: A4;
   margin: 15mm 15mm 15mm 15mm;
}
lpwm commented 3 years ago

@lpwm @danilockthar try adding:

@page {
   size: A4;
   margin: 15mm 15mm 15mm 15mm;
}

Finally found the issue was caused by a div with growing height and ignored the paddings.

franky1017 commented 2 years ago

page-break-inside: avoid;

Hi, how you avoid the next page enters with no padding on top ? i try your solution but when content is too big, the next page is close to the border top of the page.

Same issue +1

@lpwm @danilockthar try adding:

@page {
   size: A4;
   margin: 15mm 15mm 15mm 15mm;
}

I tried this and didn't work. Is there a sample code that contains the full CSS and page content that goes across multiple pages? Thanks!

fgonga commented 2 years ago

I solved it 

@page {
            size: A4;
            margin: 5mm 0mm ;
        }
.sheet {
            overflow: visible;
            height: auto !important;
        }
zerdotre commented 1 year ago

@cognitom When looping through data, is there any way we can know when a page is full? and then start/open a new sheet.