Как исправить html2canvas, не показывая цвет фона или изображение - PullRequest
0 голосов
/ 11 июля 2019

Я использую HTML2Canvas и JSPDF для создания PDF-файла из div (используя идентификатор div). Все работает хорошо, за исключением двух небольших проблем ...

  1. У меня есть два абзаца с белым фоном, установленным в CSS. Белый фон не включен в выводимый PDF.
  2. У меня есть маленькая иконка png, которая не включена в pdf.

Я уже пытался установить белый фон с помощью обычного CSS, встроенного CSS и с помощью опции 'onclone' в html2canvas как

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

параграф «назначенный» имеет дисплей: встроенный блок; цвет фона: #ffffff;

Это родительский div абсолютно позиционирован, если это имеет значение, но я не уверен, почему это так.

Мне бы хотелось, чтобы цвет фона работал с выводимым pdf.

В обычном теге img есть маленький значок png, который также не отображается.

Есть ли другой способ включить значок, чтобы заставить его работать?

Спасибо за любую помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...