JsPDF/HTML2Canvas 与 Chrome 版本 87.xxxx 的兼容性问题答案

【问题标题】：JsPDF/HTML2Canvas compatibility issue with Chrome version 87.xxxxJsPDF/HTML2Canvas 与 Chrome 版本 87.xxxx 的兼容性问题
【发布时间】：2020-12-14 18:40:50
【问题描述】：

我在我的 Angular 8 项目中使用 JsPDF 和 HTML2Canvas 将 HTML 转换为 PDF。在本周新的 Chrome 更新 (87.0.xxxx.) 到来之前，它一直运行良好。我注意到的问题是，HTML 中的输入字段（文本框/日期选择器/下拉）中的值没有反映到生成的 PDF 中。此功能适用于 Chrome 版本 86.xxxx。不确定问题出在 Chrome 或 JSpdf 或 HTML2Canvas 库上

非常感谢任何想法或帮助。

下面是我在这个过程中使用的代码 sn-p。

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');
}

【问题讨论】：

标签： angular jspdf html2canvas

【解决方案1】：

使用最新的 html2canvas.js 版本 v1.0.0-rc.7 (https://github.com/niklasvh/html2canvas/releases) 将能够反映用户输入，但对于长行输入文本将在框中裁剪，文本不会被包裹在盒子。请检查它，如果您对新的错误/包装问题有任何解决方案，请与我们分享。

【讨论】：