Request for Assistance: Addressing Text Overlapping Issue with Next.js and html2pdf.js

[vipul-binoloop]

Hello,

I hope this message finds you well. I'm currently facing a challenge with text overlapping when generating PDFs using Next.js and html2pdf.js, and I'm seeking assistance in resolving this issue.

To provide some context, I have incorporated the following dependencies in my project:

• "next": "^14.0.4"
• "html2pdf.js": "0.9.0"

Additionally, I have implemented a solution to include page breaks using React refs and a custom useEffect hook. The implementation is as follows:

const summaryRef = useRef<HTMLDivElement>(null);
const feedbackRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  const handlePageBreak = (
    sectionRef: React.RefObject<HTMLDivElement>
  ) => {
    const sectionDiv = sectionRef.current;
    if (sectionDiv) {
      const contentHeight = sectionDiv.clientHeight;
      const remainingSpace = window.innerHeight - window.scrollY;
      const pageBreakThreshold = 1123; // Example threshold for A4 height

      if (
        contentHeight > remainingSpace ||
        contentHeight > pageBreakThreshold
      ) {
        sectionDiv.classList.remove('html2pdf__page-break');
      } else {
        sectionDiv.classList.add('html2pdf__page-break');
      }
    }
  };

  handlePageBreak(summaryRef);
  handlePageBreak(feedbackRef);
}, [summary, feedback]);

Despite implementing this solution, I still encounter text overlapping issues, especially when content exceeds the available space or the specified page break threshold.

I'm reaching out to seek guidance on how to effectively address this problem. If there are any additional recommendations or modifications to the existing solution, I would greatly appreciate your insights.

Thank you in advance for your time and assistance.

Best regards, Vipul