jsPDF:如何在所有页面上添加顶部和底部边距

时间:2020-08-27 12:27:24

标签: javascript html css jspdf

我正在使用jsPDF下载带有图像的HTML页面作为多页PDF。这会将内容放入多页中,但是靠近页脚区域的内容会溢出到页边距中,并且在下一页上还会重复文本。请有人帮忙吗?

这是我的JS函数,可以进行下载

function saveAspdf() {

// using addImage
var docName = $(".entity_title_text").html() + '.pdf';  

html2canvas($("#content"), {      
  onrendered:function(canvas) { 

    var pdf = new jsPDF('p', 'mm');

    var imgData = canvas.toDataURL('image/png');
    var imgWidth = 200; 
    var pageHeight= pdf.internal.pageSize.height;

    // Total image height
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;
    
    // For pagination
    var pageNum = 1;
    var totalPages =  Math.ceil(heightLeft / pageHeight);
    
    // give some top padding to first page
    var position = 20;
    
    pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight, imgWidth * 10, imgHeight *10, 'NaN', 'FAST');
    pdf.setFontSize(5);
    var str = "Page " + pageNum  + " of " +  totalPages;
    //key is the interal pageSize function
    pdf.text(str, 175, pageHeight - 10);
    heightLeft -= pageHeight;
    while (heightLeft >= 0) {
      pageNum++;
      // top padding for other pages
      position = heightLeft - imgHeight; 
      //position = heightLeft - imgHeight;
      pdf.addPage();

      pdf.addImage(imgData, 'PNG', 20, position + 20, imgWidth, imgHeight, imgWidth * 10, imgHeight *10, 'NaN', 'FAST');
      str = "Page " + pageNum  + " of " +  totalPages;
      pdf.text(str, 175, pageHeight - 10);
      heightLeft -= pageHeight;
    }

    pdf.save(docName);
  }});

}

0 个答案:

没有答案
相关问题