无法在jsPDF的addImage()函数中为多个页面添加边距

Question

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

我正在尝试在每个页面上添加边距或填充，以便正确呈现。任何帮助都将不胜感激。这是一个angular项目。 我已经添加了我的代码如下。

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

  const contentDataURL = canvas.toDataURL('image/png')  
  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( 'file.pdf');

});  

}

- Samrat Dey

---

嗨，我也遇到了同样的问题。你找到任何解决方案了吗？ - Jazib

同样遇到了这个问题... - Kyle

在 "doc.addImage('image','png','x轴边距','y轴边距',宽度,高度)" 中。 - Pallamolla Sai

Answer 1

html2canvas和jsPDF。使用doc.margin.horiz和doc.margin.vert。

function printPdfCalc(){
    $('canvas').remove();

    var container = document.querySelector("#calc-detail-container");
    html2canvas(container).then(canvas => {
        let doc = new jsPDF({
            orientation: 'p',
            unit: 'px',
            format: 'a4'
        });
        doc.width = doc.internal.pageSize.width;
        doc.height = doc.internal.pageSize.height;
        doc.margin = {
            horiz: 15,
            vert: 20  
        };
        doc.work = {
            width: doc.width - (doc.margin.horiz * 2),
            height: doc.height - (doc.margin.vert * 2)
        }

        let data = {
            width: container.offsetWidth,
            height: container.offsetHeight,
            ctx: canvas.getContext('2d'),
            page: {}
        };
        data.page.width = data.width;
        data.page.height = (data.width*doc.work.height)/doc.work.width;

        const getData = function(imgData, width, height){
            let oCanvas = document.createElement('canvas');
            oCanvas.width=width;
            oCanvas.height=height;
            let oCtx = oCanvas.getContext('2d');
            oCtx.putImageData(imgData, 0, 0);
            return oCanvas.toDataURL('image/png');
        };

        /**/
        let oImgData = null;
        let dataURL = null;
        let pages = Math.ceil(data.height / data.page.height);
        for(let i=0; i<pages; i++){
            if( i!=0 ){
                doc.addPage();
            }
            oImgData = data.ctx.getImageData(0, data.page.height*i, data.page.width, data.page.height);
            dataURL = getData(oImgData, data.page.width, data.page.height);
            doc.addImage(dataURL, 'PNG', doc.margin.horiz, doc.margin.vert, doc.work.width, doc.work.height);
        }
        /**/
        doc.save('Test.pdf');

    });
}

- Pavel Ogurtsov

Answer 2

根据PALLAMOLLA SAI的说法，您可以在jsPDF.addImage()调用中设置边距，然后在宽度和高度上进行补偿。边距和尺寸都是addImage()的参数。

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

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

  var margin = 10;

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

  doc.addImage(contentDataURL, 'PNG', margin, margin, imgWidth - (margin * 2), imgHeight - (margin * 2));

  heightLeft -= pageHeight;

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

});  ```

- Skyler Rubin

Answer 3

你所需要做的就是从每个边缘减去边距，并在添加图像时更新起始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');

});  

- Yoni Affuta

---

上下边距是他的意思，这个例子不起作用。 - Sergio Cano