jsPDF
jsPDF copied to clipboard
Missing several line of text when using html() with autopaging: text
I'm facing an issue when using html() function to print out a html element.
This is my code:
await doc.html(contentRef.current, {
margin: [MARGIN_TOP, 0, MARGIN_BOTTOM, 0],
autoPaging: 'text', // I think this property is the cause
y: 30, // distance metadata to header (84pt) - margin top (54pt)
html2canvas: {
scale: 1.0,
ignoreElements: element => element.id === autoTableConfig?.elementId,
},
})
/// pdf save....
This is content displaying the my DOM

When I set autoPaging = text
The output pdf will be:
As you see, we miss the text line EU PEDE MOLLIS PRETIUM. INTEGER TINCIDUNT. CRAS DAPIBUS. VIVAMUS ELEMENTUM SEMPER NISI.
Then I tried switching to slice mode, now the text line is rendered, but it's sliced and put on 2 different pages. This is not our expectation :(

I'm wondering if it is a problem when calculating the possition to render the next line of Context2D when a text line is cut off. I don't have any idea to fix it so far.
Hope to see your help soon
I'm having a similar issue printing html to pdf. Not only does it appear to be removing lines, it also appears to change CSS Styling and positioning of elements passed the page break
From what have figured out, it appears to be an issue between autopagin text and margin bottom. For me, its seems to have fixed by removing setting margin-bottom 0px and removing autopaging. Although my margins were previously all set to 10.
Thanks for the bug report. A pull request fixing this is very welcome.
the issue i just created is probably related to this ? https://github.com/parallax/jsPDF/issues/3403
in my case all of the formatting problems start when autopaging is set to true and i have more than 2 pages ... the more pages i have the bigger are the formatting errors..
@aholake @valueerrorx have u found any solution for this problem plz ?
unfortunately not. i am now creating the pdf's on the electron side of my code using printToPDF(options) it gives me much more control over the process and produces perfect pdfs.
this way i am able to set some basic options (like printBackground, pageSize, etc) and via CSS @media print {} condition i am able to change a lot of inpage styles before printing to pdf (making some elements invisible for example)