使用jspdf生成的PDF页面的底部图像截屏被截断了

时间:2019-03-24 15:02:01

标签: angular6 jspdf

使用以下代码,我能够成功将html转换为pdf并下载多页pdf。

public generatePDF() {
    var data = document.getElementById('contentToConvert');

    html2canvas(data, { scale:2,
      onclone: function (clonedDoc) {
        clonedDoc.getElementById('contentToConvert').style.display = 'block';
      }
    }).then(canvas => {

      const contentDataURL = canvas.toDataURL('image/jpeg', 1.0);
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jspdf('p', 'mm');
      var position = 0;

      doc.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save('test.pdf');
    });
 }

我的要求是生成具有以下要求的PDF

1)动态添加页面(这已经在发生) 2)动态添加div作为所有页面的标题 3)页面底部无数据截断

我能够达到第1点,我需要达到其他两个要求。

0 个答案:

没有答案