Я использую HTML2Canvas и JSPDF для создания PDF-файла из div (используя идентификатор div). Все работает хорошо, за исключением двух небольших проблем ...
- У меня есть два абзаца с белым фоном, установленным в CSS. Белый фон не включен в выводимый PDF.
- У меня есть маленькая иконка 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, который также не отображается.
Есть ли другой способ включить значок, чтобы заставить его работать?
Спасибо за любую помощь!