html2pdf 不在另一个图像前面呈现 pdf 图像

Question

我正在尝试将 html 页面转换为 pdf，我在上传的 jpg 中动态添加的画布元素前面有一个透明 png，当我运行脚本时，它会呈现 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();

});

Answer 1

我认为你可以使用 wkhtmltopdf 命令行工具

请看这个https://wkhtmltopdf.org/