JsPDF和Html2canvas-如果“多”页图像被截断

Question

我有一个列出多个产品的页面。单个产品分为3个单独的div。我正在遍历每个产品，并将每个div转换为单独的html2canvas图像，从而导致一个产品在PDF中有3页（每个div一个）

这对于1种产品（在pdf中为3页）有效，但是在以后（例如PDF的第4页）中都可以使用，并且由于某些原因图像的顶部开始被切掉。

这是我正在使用的代码

var doc = new jsPDF(1, "pt", "letter");
(async function loop(){
<?php 
    $count = 0; 
    foreach($products as $k => $v){ 
    $count++; 
    ?>
var k = '<?php echo $k; ?>';
for(var i=1;i<4;i++){
    await new Promise(function(resolve){
        html2canvas($("#pdfcontent"+i+"_"+k)[0], {scale: 2}).then((canvas) => {
            var imgData = canvas.toDataURL('image/jpeg', 1.0);
            doc.addImage(imgData, 'JPEG', 10, 0,  590.28, 590.28/canvas.width * canvas.height);
            if (i < 3){
                doc.addPage();
            }else{
                <?php if ($count == count($products)){ ?>
                doc.save('test.pdf');
                <?php }else{ ?>
                doc.addPage();
                <?php } ?>
            }
            resolve();
        });
    });
}
<?php 
    } 
    ?>
})();

这里是问题的屏幕截图，即使您知道标题使用的是与创建第一张图片完全相同的代码，也可以在第二张图片上看到标题已消失。

第一张图片

第二张图片

非常感谢您提供解决方案的帮助，谢谢。