Page break support for type html

[EricLease]

I have implemented basic page-break support for html printing in a branch (break-support) of my fork. The need arises from trying to control page-breaks when printing large sections of html.

I have tested this on Chrome, FF, and IE. Support for page-break-* and break-* is not uniform across all browsers, and even more so when it comes to the supported values for page-break-*. In my case I have strict control over use of page-break-*/break-* (I'm only using always and avoid), and I could see how a more robust implementation of this feature could become quite cumbersome. So this may not be a road you want to travel down, but just wanted to let you know it's there if you'd like to take a look. Let me know if you'd like a pull request.

For cross-browser support of page breaks, for example, I would apply a class like the following:

.page-break {
    page-break-after: always;
    page-break-inside: avoid;
    page-break-before: avoid;
    break-after: always;
    break-inside: avoid;
    break-before: avoid;
}

[crabbly]

@EricLease Cool. I'll take a look at it as soon as I have a chance.

[crabbly]

Hey @EricLease , I had never take the time to look into this untill now. You branch looks great. I do however, want to keep using es6 let for variables.
I know it is been a while, but if you could do a pull request for the page-break support, that would be great. Thank you.

[crabbly]

I added support for page break with commit 163548d
Thank you @EricLease

[chocomail]

so i already read this and try to add css page-break as the same as @EricLease
but, it seems like im doing it wrong,
the html that i write is like this

<div id="print>
 <table>**content**</table>
 <div class="page-break"></div>
 <table>**content2**</table>
</div>

but when i print it, it doesnt do the page-break.
am i doing it right?

[crabbly]

Hey @chocomail , did you create the class page-break in your project?

[chocomail]

uhm
do you mean create the class page-break is create the css containing page-break?
i tried both, (create css page-break and not create), and not one of them is working.
am i already doing it right for the html?
if so, im afraid i must my other component in my project.
im adding codepen.
what i hope to happen is, the table no.2 is in another page.
https://codepen.io/anon/pen/qKOXNR

okay, as when im using the codepen, i found the one making it not working the page-break is targetStyles. Am i doing it wrong?

printJS({
	maxWidth: 756,
	targetStyles: [
		"border",
		"display",
		"filter",
		"height",
		"left",
		"padding",
		"position",
		"text-align",
		"text-decoration",
		"top",
		"width",
		"font",
		"vertical-align",
		"page-break"
	],
	type: "html",
	printable: "print"
})

okay i found it again, must insert

page-break-after
page-break-inside
page-break-before
break-after
break-inside
break-before

inside targetStyles, strangely enough, in my computer when i use
targetStyles: ['*']
is not working.
thank you

[crabbly]

Glad you figured it out.
You can just pass break and it should works as well:
https://codepen.io/anon/pen/ZRbMMW

I'm not sure why targetStyles: ['*'] is not working. It must be a bug. I'll check on that.
Thank you.

[crabbly]

I found the issue with targetStyles: ['*'] not responding. It has been fixed and pushed to npm.

[thomazette]

Hey @crabbly ,
Your example on https://codepen.io/anon/pen/ZRbMMW
not working, maybe same update from Chrome?