Question

我使用jsPDF和html2canvas软件包从HTML保存PDF文件。

我的问题是内容是动态的，我不知道每个页面何时结束。

我使用此功能创建PDF并将内容拆分为页面。

但是有时文本行可能会分成两页。我该如何预防？

 import { Injectable } from '@angular/core';
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';

createpdf() {
var data = document.getElementById('parentdiv');
var date = new Date();
html2canvas(data).then(canvas => {
  var imgWidth = 210;
  var pageHeight = 295;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;

  //enter code here
  const imgData = canvas.toDataURL('image/png')

  var doc = new jsPDF('p', 'mm');
  console.log(doc)
  var position = 0;

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

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
    heightLeft -= pageHeight;
  }
  doc.save('Visiometria_' + date.getTime() + '.pdf')

});
}

Answer 1

您可以通过将PDF页面的高度设置为与图像高度完全相同来防止这种情况。您甚至可以为每个页面设置不同的大小

var doc = new jsPDF('p', 'mm', [68,20]);
doc.addPage(100, 200);

对于单页，您可以尝试以下代码

createpdf() {
    var data = document.getElementById('parentdiv');
    var date = new Date();
    html2canvas(data).then(canvas => {
        var imgWidth = 210;
        var pageHeight = 295;
        var imgHeight = canvas.height * imgWidth / canvas.width;
        var heightLeft = imgHeight;

        //enter code here
        const imgData = canvas.toDataURL('image/png')
        if("portrait"){
            var doc = new jsPDF('p', 'mm', [210, imgHeight]);
        } else {
            var doc = new jsPDF('l', 'mm', [297, imgHeight]);
        }

        var position = 0;

        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        doc.save('Visiometria_' + date.getTime() + '.pdf')

    });
}

防止在jsPDF中将文本拆分为两页

1 个答案: