javascript - 如何正确布局到pdf

Question

使用我的代码，我试图以有序的方式对我的 div #printDiv 进行分页，但我无法获得预期的结果。现在这是我的代码，但 pdf 中的结果不正确：

$(document).ready(function(){

        
    $("#pdfDownloader").click(function(){
    
        html2canvas(document.getElementById("printDiv"), {
            onrendered: function(canvas) {

                var imgData = canvas.toDataURL('image/png');
                console.log('Report Image URL: '+imgData);
                var doc = new jsPDF('p', 'mm', 'a4',true); //210mm wide and 297mm high
                doc.setFontSize(10);
                doc.setDrawColor(204, 204, 204);
                                doc.setLineWidth(1.0); 
                                doc.line(0, 20, 600, 20);
                
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.fromHTML($("#contInfoProd ul").html(),20,50);
                                doc.text(20,280, $("#footerPdf p").text(),{align:'center'});
                doc.save('sample.pdf');
            }
        });

    });
    
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<div id="printDiv">
  <h2>Logo MySite</h2>
  <div id="contInfoProd" style="display:none;">
  <ul>
  <li><b>Sku:</b><span>FR54367</span></li>
  <li><b>Position:</b><span>Front</span></li>
  <li><b>Printing size:</b><span>120x30mm</span></li>
  </ul>
  <div id="contDescProd">
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
  </div>
  </div>
  
  <div id="footerPdf" style="text-align:center;display:none;">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
     </div>
</div>
<button type="button" id="pdfDownloader">Download</button>

这是我的小提琴：https ://jsfiddle.net/Jackom/jdap39gq/38/

我想得到的结果是这样的：

如何编写代码以正确获取此布局？

谢谢你的帮助

标签： javascripthtmljqueryjspdfhtml2canvas