Question

我正在使用HTML2Canvas和JSPDF从div生成pdf（使用div ID）。除两个小问题外，其他一切都正常运行...

我在CSS中设置了两个带有白色背景的段落。白色背景不包含在输出的pdf中。
我有一个不包含在pdf中的小png图标。

我已经尝试通过普通的CSS，内联CSS和html2canvas的'onclone'选项将白色背景设置为

document.querySelector(".esigned").style.backgroundColor = "#ffffff";

但这些方法都无效。

生成pdf的代码如下：-

getPDF = function() {
        var HTML_Width = $("#agreement").width();
        var HTML_Height = $("#agreement").height();
        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;

        html2canvas(document.getElementById("agreement"), {
            allowTaint: true,
            //useCORS: true,
            onclone: function(document) {
                document.getElementById("agreement").style.borderStyle = "none";
                document.querySelector(".esigned").style.backgroundColor =
                    "#ffffff";
            }
        }).then(function(canvas) {
            canvas.getContext("2d");

            console.log(canvas.height + "  " + canvas.width);

            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var 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
            );

            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 * 4,
                    canvas_image_width,
                    canvas_image_height
                );
            }

            pdf.save("agreement.pdf");
        });
    };

“已签名”段落包含显示：inline-block; 背景颜色：#ffffff;

如果有区别，它的父div绝对定位，但是我不确定为什么会这样。

我希望背景色可用于输出的pdf。

正常的img标签中有一个小的png图标，也不会显示。

还有其他方法可以尝试包含图标以使其正常工作吗？

感谢您的帮助！

如何修复html2canvas不显示背景颜色或图像

0 个答案: