We use jsPDF + html2canvas Javascript libraries to export HTML to PDF without the need for Native Browser support. Some of our big corporate customers use browsers which do not have Print to PDF functionality.
The current solution works pretty well, it creates a container DIV element with "overflow:hidden" and positions the HTML that is being exported such that only 1 page is visible, since we know exactly how many pixels wide/tall the page should be, then we use the library to export the view at that moment, then reposition things for the next page by scrolling down (actually we use a negative top margin, since html2canvas doesn't respect the "scrollTop" property).
The problem, though, is that this solution does not handle well at the borders of the pages. Images and text will get cut in the middle, and then continues on the next page. The end result looks weird, but at least there is nothing missing.
Is there a way to prepare this HTML in such a way that it will behave nicely at the borders? I am given an HTML element that when placed into an element of pageWidth pixels wide needs to be cut into pieces of exactly pageHeight pixels tall. I can modify the HTML any way that I want, b
I feel like there should be some solution, since I've noticed using the native PDF Print on Chrome solves this somehow because the output looks fine there - it somehow moves images around so it doesn't get cut off.
Here is a sample JS that I created that demonstrates how my code will create multiple pages.
