Multipage : PDF content breaking

[AnuradhaS3]

I am using jsPDF + html2canvas to create a PDF document. However, I am encountering an issue where the content breaks when transitioning from one page to the next, especially since we are dealing with a substantial amount of content for conversion.

Facing this issue on all Mobile devices (IOS/Android)

Code Reference
async printBodyAsPDF(content) {
if (this.appUtility?.isMobileAppView() && this.appUtility?.isPageEligibleForPrintInMobile()) {
let nodes = content.querySelectorAll(".al-print-only");
if (nodes && nodes.length > 0) {
[].forEach.call(nodes, (ele) => {
ele.classList.remove("al-print-only");
});
}
// Adds float:right !important to the .al-w100 class dynamically
const style = document.createElement('style');
style.id = 'af-print-w100';
style.innerHTML = .al-w100 { float: none !important; };
document.head.appendChild(style);
// fix words spacing issue in IOS mobile app
if (this.appUtility.isIOS()) {
const styleelm = document.createElement('style');
styleelm.id = 'letter-spacing-fix';
// Add the CSS rule to the style element
styleelm.innerHTML = 'b, strong { letter-spacing: 0.02em !important; }';
document.head.appendChild(styleelm);
}
try {
// Render the desired element to canvas
const canvas = await html2canvas(content, { scale: 2 });
const imgData = canvas.toDataURL("image/png");
const pdf = new (window as any).jspdf.jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts: true,
floatPrecision: 16,
});
// PDF page size in mm (A4)
const pdfWidth = 210;
const pdfHeight = 297;
// Canvas size in px
const imgWidth = pdfWidth;
let imgHeight = (canvas.height * pdfWidth) / canvas.width;
let remainingHeight = imgHeight;
// If content fits on one page
if (imgHeight <= pdfHeight) {
pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
} else {
// Multi-page logic
let pageHeight = pdfHeight;
let pageCanvas = document.createElement("canvas");
let pageCtx = pageCanvas.getContext("2d");
let sX = 0, sY = 0, sWidth = canvas.width, sHeight = (canvas.width * pageHeight) / pdfWidth;

                while (remainingHeight > 0) {
                    pageCanvas.width = canvas.width;
                    pageCanvas.height = Math.min(sHeight, canvas.height - sY);

                    pageCtx.clearRect(0, 0, pageCanvas.width, pageCanvas.height);
                    pageCtx.drawImage(canvas, sX, sY, sWidth, pageCanvas.height, 0, 0, sWidth, pageCanvas.height);

                    let pageImgData = pageCanvas.toDataURL("image/png");
                    pdf.addImage(pageImgData, "PNG", 0, 0, imgWidth, (pageCanvas.height * pdfWidth) / canvas.width);

                    remainingHeight -= pageHeight;
                    sY += sHeight;

                    if (remainingHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            if (this.appUtility.isIOS()) {
                // Save PDF after a short delay to ensure all resources are loaded
                const currentDate = new Date();
                const pageUrl = window.location.href;
                const current_awl_page = this.appUtility.getPageName(pageUrl);
                const filename = `${current_awl_page}_${currentDate.getFullYear()}_${currentDate.getMonth() + 1}_${currentDate.getDate()}_${currentDate.getHours()}_${currentDate.getMinutes()}_${currentDate.getSeconds()}.pdf`;
                pdf.save(filename);
                this.hideShowPDFLoader = false;
            } else {
                // Generate PDF as Blob
                let blobUrl = pdf.output('bloburl');
                window.open(blobUrl, "_blank");
                // Added timer to clean browser memory 
                setTimeout(() => {
                    URL.revokeObjectURL(blobUrl.toString());
                }, 5000);
                // Hide the print loader
                this.hideShowPDFLoader = false;
                // show open as PDF button again
                if (content) {
                    content.classList.add("al-print-only");
                }
                const allNode = document.querySelectorAll("body > *");
                if (allNode && allNode.length > 0) {
                    [].forEach.call(allNode, (ele) => {
                        ele.classList.remove("al-print-no");
                    });
                }
                const lightBoxEle = document.querySelectorAll(".al-print-light-box");
                [].forEach.call(lightBoxEle, (ele) => {
                    ele.remove();
                });
                // remove float:right !important to the .al-w100 class style 
                let styleTag = document.getElementById('af-print-w100');
                if (styleTag) {
                    styleTag.remove();
                }
                let elm = document.getElementById('letter-spacing-fix');
                if (elm) {
                    elm.remove();
                }
            }
        } finally {
               
        }
    } 
}

[texas697]

  const onPdf = React.useCallback(async () => {
    const targetElement = mm.exportContentRefs.current[questionId];
    if (!targetElement) {
      console.error('Target element not found for PDF generation');
      return;
    }
    try {
      dispatch(minimeActions.onIsLoading(true));
      const canvas = await html2canvas(targetElement, {
        scale: 2,
        logging: false,
        useCORS: true
      });

      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'mm',
        format: 'a4',
      });

      const margin = 10;
      const imgWidth = 210 - (margin * 2);
      const pageHeight = 297;
      const usablePageHeight = pageHeight - (margin * 2);
      const imgHeight = (canvas.height * imgWidth) / canvas.width;

      let sourceY = 0;
      let pageNumber = 0;

      while (sourceY < imgHeight) {
        if (pageNumber > 0) {
          pdf.addPage();
        }

        const remainingHeight = imgHeight - sourceY;
        const heightToPrint = Math.min(remainingHeight, usablePageHeight);

        const sy = (sourceY / imgHeight) * canvas.height;
        const sh = (heightToPrint / imgHeight) * canvas.height;

        const pageCanvas = document.createElement('canvas');
        pageCanvas.width = canvas.width;
        pageCanvas.height = sh;
        const pageCtx = pageCanvas.getContext('2d');

        if (pageCtx) {
          pageCtx.drawImage(canvas, 0, sy, canvas.width, sh, 0, 0, canvas.width, sh);
          const pageImgData = pageCanvas.toDataURL('image/jpeg', 1.0);
          pdf.addImage(pageImgData, 'JPEG', margin, margin, imgWidth, heightToPrint);
        }

        sourceY += usablePageHeight;
        pageNumber++;
      }

      pdf.save(`export-${format(new Date(), 'MM-dd-yyyy-hh:mma')}.pdf`);
      dispatch(minimeActions.onSelectExport(null));
    } catch (error) {
      console.error('Error generating PDF:', error);
      dispatch(minimeActions.onSelectExport(null));
    }
  }, [mm.exportContentRefs, questionId, dispatch]);

WORKS PERFECT

[AnuradhaS3]

Thanks @texas697 for the quick help. I am using Angular 18 and after some modification start using below code but still facing same content breaking issue.
const onPdf = async () => {
// You may need to replace mm.exportContentRefs.current[questionId] and dispatch/minimeActions with Angular equivalents
// For demonstration, we'll use the passed 'content' argument
const targetElement = document.body;;
if (!targetElement) {
console.error('Target element not found for PDF generation');
return;
}
try {
// Remove dispatch/minimeActions for Angular context
const canvas = await html2canvas(targetElement, {
scale: 2,
logging: false,
useCORS: true
});

                    const pdf = new jsPDF({
                        orientation: 'portrait',
                        unit: 'mm',
                        format: 'a4',
                    });

                    const margin = 10;
                    const imgWidth = 210 - (margin * 2);
                    const pageHeight = 297;
                    const usablePageHeight = pageHeight - (margin * 2);
                    const imgHeight = (canvas.height * imgWidth) / canvas.width;

                    let sourceY = 0;
                    let pageNumber = 0;

                    while (sourceY < imgHeight) {
                        if (pageNumber > 0) {
                            pdf.addPage();
                        }

                        const remainingHeight = imgHeight - sourceY;
                        const heightToPrint = Math.min(remainingHeight, usablePageHeight);

                        const sy = (sourceY / imgHeight) * canvas.height;
                        const sh = (heightToPrint / imgHeight) * canvas.height;

                        const pageCanvas = document.createElement('canvas');
                        pageCanvas.width = canvas.width;
                        pageCanvas.height = sh;
                        const pageCtx = pageCanvas.getContext('2d');

                        if (pageCtx) {
                            pageCtx.drawImage(canvas, 0, sy, canvas.width, sh, 0, 0, canvas.width, sh);
                            const pageImgData = pageCanvas.toDataURL('image/jpeg', 1.0);
                            pdf.addImage(pageImgData, 'JPEG', margin, margin, imgWidth, heightToPrint);
                        }

                        sourceY += usablePageHeight;
                        pageNumber++;
                    }
                    if (this.appUtility && this.appUtility.isIOS()) {
                        // Save PDF after a short delay to ensure all resources are loaded
                        pdf.save(`export-${new Date().toISOString()}.pdf`);
                        this.hideShowPrintLoader = false;
                    } else {
                        // Generate PDF as Blob
                        let blobUrl = pdf.output('bloburl');
                        window.open(blobUrl, "_blank");
                        // Added timer to clean browser memory 
                        setTimeout(() => {
                            URL.revokeObjectURL(blobUrl.toString());
                        }, 10000);
                        // Hide the print loader
                        this.hideShowPrintLoader = false;
                    }
                   
                    // Remove dispatch/minimeActions for Angular context
                } catch (error) {
                    console.error('Error generating PDF:', error);
                    // Remove dispatch/minimeActions for Angular context
                }
            }
            await onPdf(); 

[AnuradhaS3]

Hi @team - Please revert.

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.