html2pdf не отображает pdf-изображение перед другим изображением

#html #jquery #css #pdf #html2pdf

Вопрос:

Я пытаюсь преобразовать html-страницу в pdf, у меня есть прозрачный png перед динамически добавляемым элементом холста из загруженного jpg, когда я запускаю скрипт, он отображает pdf, но отображает только изображение jpg. Я перепробовал множество итераций, а также пробовал различные библиотеки рендеринга, такие как html2canvas и т. Д. Может ли кто-нибудь пролить некоторый свет на это, поскольку я в растерянности??

 .proof_images {
max-width:960px;
height:679px;
z-index:1;
}

.proof {
position:relative;
margin:0;
padding:0;
width:100%;
height:100%;
z-index:2;
}

<div id="print_proof" class="print_proof">
<div class="proof">
<img id="image_proof_background" class="proof_images" src="https://www.eimedia.com.au/wp-content/uploads/explainer.jpg" style="margin-bottom:20px; opacity:1;">
</div>
</div>

$("#generate").click(function() {

var element = document.getElementById('print_proof');
var opt = {
    margin:       1,
    filename:     'myfile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
};

html2pdf().set(opt).from(element).save();

});
 

Ответ №1:

Я думаю, вы можете использовать инструмент командной строки wkhtmltopdf

пожалуйста, посмотрите это https://wkhtmltopdf.org/