jsPDF icon indicating copy to clipboard operation
jsPDF copied to clipboard

Missing several line of text when using html() with autopaging: text

Open aholake opened this issue 3 years ago • 7 comments

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 MY TREES, AND BUT A FEW STRAY GLEAMS STEAL INTO THE INNER SANCTUARY, I THROW MYSELF DOWN

When I set autoPaging = text The output pdf will be: image 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 :( image

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

aholake avatar Mar 18 '22 11:03 aholake

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

PLP-Casey avatar Mar 18 '22 16:03 PLP-Casey

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.

PLP-Casey avatar Mar 18 '22 17:03 PLP-Casey

Thanks for the bug report. A pull request fixing this is very welcome.

HackbrettXXX avatar Apr 04 '22 09:04 HackbrettXXX

the issue i just created is probably related to this ? https://github.com/parallax/jsPDF/issues/3403

valueerrorx avatar Apr 06 '22 19:04 valueerrorx

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..

valueerrorx avatar May 03 '22 12:05 valueerrorx

@aholake @valueerrorx have u found any solution for this problem plz ?

ChamkhiAnas avatar Feb 07 '23 23:02 ChamkhiAnas

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)

valueerrorx avatar Jul 15 '23 06:07 valueerrorx