JsPDF/HTML2Canvas compatibility issue with Chrome version 87.xxxx

Viewed 570

I am using JsPDF along with HTML2Canvas to convert the HTML to PDF in my Angular 8 project. It was working perfectly fine until the new Chrome update came this week (87.0.xxxx.). The issue I noticed is, that the value in the Input filed(textbox/date picker/drop-down ) in HTML is not getting reflected into the generated PDF. This functionality is working fine with Chrome version 86.xxxx. Not sure if the issue is with Chrome or JSpdf or HTML2Canvas library

Any thoughts or help is much appreciated.

Below is the code snippet I'm using for this process.

var data = document.getElementById('myhtmlform');
var HTML_Width = $(".myhtmlform").width();
var HTML_Height = $(".myhtmlform").height() + 10;
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2)
var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);

html2canvas(data, { allowTaint: true }).then(canvas => {
    canvas.getContext('2d');
    var imgData = canvas.toDataURL("image/jpeg", 1.0);
    pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin + 10, canvas_image_width, canvas_image_height);
    pdf.setFillColor(255, 255, 255);
    for (var i = 1; i <= totalPDFPages; i++) {
        pdf.addPage(PDF_Width, PDF_Height);
        pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * (2 * i + 1)), canvas_image_width, canvas_image_height);
        pdf.setFillColor(255, 255, 255);
        pdf.rect(0, 0, PDF_Width, top_left_margin, 'F');
        pdf.rect(0, (PDF_Height - top_left_margin) - 15, PDF_Width, top_left_margin + 15, 'F');
    }
    var file = pdf.output('datauri');
}
1 Answers

Use of latest html2canvas.js version v1.0.0-rc.7 (https://github.com/niklasvh/html2canvas/releases) will able to get reflect user input but for long line of input text would be cropped inside the box, text would not be wrapped within the box. Please check it and if you have any solution of the newer bug/wrapping issue then please share with us.

Related