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();
});
});
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().