Unable to add margin on addImage() function of jsPDF for multiple pages

Question

I am trying to generate PDF of some html tables with jspdf. The addImage() function is working fine but when the size of image is more than the pdf page size the image continues on the next page as shown in the image above

i am trying to add a margin or padding on every page so that it gets rendered correctly. Any Help would be appreciated.This is an angular project. I have added my code below.

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');

});  

}

Answer 1

html2canvas and jsPDF. Use doc.margin.horiz and 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');

    });
}

Answer 2

Just adding it here from what PALLAMOLLA SAI said: you set the margin as part of the jsPDF.addImage() call and then compensate in the width and height. Both the margins and the dimensions are parameters of 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');

});  ```

Answer 3

All you need to do is subtract the margin from the image size for each side and update the start x position when adding images

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');

});