Skip to content

Affecting jsPDF + html2canvas on recent iOS versions (iOS 17.x, 18.x, iPadOS included)Β #3876

@AnuradhaS3

Description

@AnuradhaS3

I have dynamic content (large data - around 9 to 10 pages) which I need to pass to JSPDF for PDF generation, but the PDF is not generating for specific versions of iOS. Please suggest solution.
Below are some data which we have captured ..
iphone ---- 18.0 Not Working (iPhone 15 )
ipad ------ 17.4.1 Not Working( 10th Gen )
ipad ------ 17.4.0 Working( 10th Gen ) Simulator

iphone ---- 17.5.1 Working (iPhone 15 )
ipad ------- 18.1 Working ( 9th Gen )

Reference code -

const onPdf = async () => {
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++;
                    }
                        pdf.save(`export-${new Date().toISOString()}.pdf`);
                      } catch (error) {
                    console.error('Error generating PDF:', error);

                }
            }
            await onPdf();

I have tried relacing syntax but didn't worked for me
pdf.save(export-${new Date().toISOString()}.pdf);

to

const blob = pdf.output('blob');
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
setTimeout(() => URL.revokeObjectURL(url), 30000);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions