JSPDF html2Canvas not downloading the PDF file on IOS browsers

Viewed 273

I am working on a project that creates HTML CSS DIV and I am using JSPDF and html2Canvas to convert the DIV and download it, this works perfectly on PC and Android, but in IOS browsers it doesn't work and the download button not doing anything

the JS code

$('#print').click(function (e) { 
e.preventDefault();
let HTML_Width = $(".report").width();
let HTML_Height = $(".report").height();
let top_left_margin = 1;
let PDF_Width = HTML_Width + (top_left_margin * 2);
let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
let canvas_image_width = HTML_Width;
let canvas_image_height = HTML_Height;
let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($(".report")[0]).then(function (canvas) {
    let imgData = canvas.toDataURL("image/jpeg", 1.0);
    let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
    pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height, 'FAST');
    for (let i = 1; i <= totalPDFPages; i++) {
        pdf.addPage(PDF_Width, PDF_Height);
        pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
    }
    pdf.save("Report.pdf");
    $(".html-content").hide();
});
});
1 Answers

Have you tried dom-to-image? It uses SVG as a container, and faithfully represents advanced CSS. Maybe your issue is protected media, such as YouTube or PDF? Don't forget the CORS!

...it doesn't work and...

I assumed you meant two(2) things. Namely, I assumed you meant that JSPDF addHTML() and/or html2Canvas() "didn't work"... in addition to save().

Related