无法在多页的jsPDF的addImage（）函数上添加边距

Question

我正在尝试使用jspdf生成一些html表的PDF。 addImage（）函数可以正常工作，但是当图像大小大于pdf页面大小时，图像将继续在下一页上显示，如上图所示

我正在尝试在每页上添加页边距或填充，以使其正确呈现。任何帮助将不胜感激。这是一个有角度的项目。我在下面添加了我的代码。

function makeAjaxCalls() {
    var menuValue = $('#menu').val();
    // Run some ajax calls based on menuValue and return the promise
    return Promise.resolve()
}

$('#menu').change(makeAjaxCalls);
$('#button').click(function(){
    $('#menu').val(5);
    makeAjaxCalls().then(function() {
        // Do something after ajax calls completed
    });
});

}

Answer 1

您需要做的就是从图像尺寸的每一边减去边距并更新 添加图像时的起始x位置

public captureScreen() {
var data = document.getElementById('content');  
html2canvas(data).then(canvas => {  
  // Few necessary setting options  

  const contentDataURL = canvas.toDataURL('image/png')  
  var margin = 2;
  var imgWidth = 210 - 2*margin; 
  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', margin, position, imgWidth, imgHeight);

  heightLeft -= pageHeight;

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

});