html2canvas可以使用jspdf添加多个页面吗?

下面是我现在的片段,它在一页中打印所有画布。我想把每一张画布都打印成一页。

我有用 Fabricjs 从json渲染画布。其他pdf库无法打印画布,它下载了空的pdf,所以我尝试 JSPDF 但陷入了一个问题。

DEMO

<script>
var jsPDF = window.jspdf.jsPDF;
var html2canvas = window.html2canvas;

function downloadpdf(){
    console.log('Inside downloadpdf ');
    var quotes = document.getElementById('generatePDF');
    html2canvas(quotes, {
        onrendered: function(canvas) {
            canvas.getContext('2d');
            var HTML_Width = canvas.width;
            var HTML_Height = canvas.height;
            var top_left_margin = 15;
            var PDF_Width = HTML_Width+parseInt(top_left_margin*2);
            var PDF_Height = parseInt(PDF_Width*1.5)+parseInt(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;
            var pages = $('#generatePDF .canvas-container').length;

            console.log('height => '+canvas.height+" width => "+canvas.width+'totalpage => '+pages);
            
            
            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 <= pages; i++) {
                //pdf.addPage(PDF_Width, PDF_Height);
                pdf.addPage();
                let margin=-parseInt(PDF_Height*i)+parseInt(top_left_margin*4);
                if(i>1){
                    margin= parseInt(margin+i*8);
                }
                pdf.addImage(imgData, 'JPG', top_left_margin, margin,canvas_image_width,canvas_image_height);
            }
            pdf.save("HTML-Document.pdf");
        }
    });
}
</script>