Text sliced at botton of pdf

[lidijarad]

Hello @eKoopmans,

thank you again for such a great tool. I was wondering if you you or anyone has encountered this problem. I am using html2pdf lib to produce a PDF where the html is dynamic and changing. I have tried adjusting the margins but for some cases, when the text within the html is long and needs to go onto the next page, the text on the last line is sliced. Here is an example of what I mean: Is it possible that this might be due to the docHeight of the canvas as mentioned in #6?
This is how I am producing the pdf:

html2pdf(pdf_element, {
	 margin: [0.8, 1, 0.5, 1],
	 filename: pdf_name,
         image: { type: 'jpeg',quality: 0.98 },
         html2canvas: { dpi: 192, letterRendering: true },
         jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
});

[eKoopmans]

Hi @lidijarad, yes at the moment that's intended behaviour. All html2pdf is doing is converting the webpage into an image, and then slicing that image onto separate PDF pages. If your text (or any other component) straddles two pages, it will appear sliced.

The only solution I can recommend right now is the page-breaks. You can add a <div class="html2pdf__page-break"></div> anywhere in your HTML, and any elements below it will be moved to the top of the next page. I've written a bit more about how to use them here. As I mention over there, I have plans to make the page-breaks easier to use.

[lidijarad]

@eKoopmans, thank you for the feedback. Because the content in the html is dynamic, it is very difficult to calculate when to insert the page break. I have experimented with a few different ways, (counting number of characters in a page, estimating number of lines) but I have not found an elegant solution. I will continue working on this. If I find a solution, I will post it here. Thank you again, please keep in touch if you make any changes with regards to this.

[eKoopmans]

Great, thanks. I have a few ideas, but it depends on your situation. I could probably make an auto-break system that would add a page break before any element that would span two pages (as long as the element itself wasn't taller than a page). If you have spans of text longer than a page it would have to be a different solution.

[ABobbyT]

Hi, I had a similar problem printing reports in a vertically long table. I solved my it by calculating the heights of the element before I added them, adding a page-break if it would exceed the page height. It's not the most elegant solution however as it leaves a bit of a white space at the bottom of the page. An A4 page is 595pt/842pt ( 793px/1122px. )

I hope this helps, would be interested to hear the solution you choose to go with.

[eKoopmans]

Thanks @ABobbyT, yeah that's basically what I was thinking for an "auto-break" system, but I could work it into the internal guts of html2pdf.

[MythThrazz]

I'm guessing the auto-break is not there yet? It's actually the only thing I've actually found missing. Otherwise great job!

[eKoopmans]

Yes, you're right @MythThrazz! Haven't had much time to work on this project lately, unfortunately. I'm hoping to have an update soon!

[itskashi]

@ABobbyT @eKoopmans >>I solved my it by calculating the heights of the element before I added them
Can you please give me an insight of how to calculate an element height before adding to DOM?
I have multiple

s to 'echo' from a PHP loop and want to add page-break so that it does not break the text.
Please advise. Thanks

[kkbalu]

Hi , i am too facing same probs in angular6. If any got solution means pls let me know, another probs is images not rendered from api.

[Greensahil]

lilidijard I have the same problem did you come up with any solutions

[khateeburrehman]

@eKoopmans @lidijarad did you find any solution?