parallax/jsPDF

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

Open

#3393 opened on Mar 18, 2022

View on GitHub
 (13 comments) (7 reactions) (0 assignees)JavaScript (28,280 stars) (4,596 forks)batch import
Bugdifficulty:mediumhelp wanted

Description

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

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
jsPDF library basicsauto paging algorithmJavaScriptHTML/CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
25
Research direction
Investigate the autoPaging 'text' mode in jsPDF's html plugin. Focus on how line breaks and page breaks are determined. Look at the source code in modules related to html conversion and paging (e.g., jspdf.plugin.html.js). The issue mentions that slice mode works but cuts text, while text mode misses lines. Check the coordinates calculation when a line is cut off. There are comments in the issue (#3393) suggesting similar problems. The goal is to ensure all text lines are rendered correctly when autoPaging is set to 'text'.