Jspdf: Set the margin to pdf page

Created on 26 Feb 2019  路  14Comments  路  Source: MrRio/jsPDF

I am using jsPDF version 1.5.3 and I want to convert HTML into PDF. I also want to add margin to each pages of PDF so that content should not get cut while splitting it to next page. I have written following code until now:

var pdf = new jsPDF('p', 'pt', 'a4');

var margin = {top: 10, right: 20, bottom: 10, left: 20};

pdf.html(document.getElementById('content'), {
      callback : function (pdf) {
          pdf.save('content.pdf');
      }
});

I have a margin to set, but didn't find any way to set. Does anyone help me out here?

Most helpful comment

Should this issue really be marked as a duplicate? From I what I understood this issue regards the specific problem of setting margins to PDFs with the .html() method, whereas issue #1176 is a broad discussion on the new .html(). Also, issue #1176 doesn't seems to have solution nor discussion on this specific problem.
Isn't it better for this issue to stay open until we find a solution and keep the other issue less polluted.

All 14 comments

I just spend the whole day searching how to apply margins to every page, with the "html" module and ran out of luck. Margins are such important elements when working with pdf. Any pointers are greatly appreciated.

Duplicate of #1176

Should this issue really be marked as a duplicate? From I what I understood this issue regards the specific problem of setting margins to PDFs with the .html() method, whereas issue #1176 is a broad discussion on the new .html(). Also, issue #1176 doesn't seems to have solution nor discussion on this specific problem.
Isn't it better for this issue to stay open until we find a solution and keep the other issue less polluted.

@pedrovsp

Problem is, that all these things should be concentrated in one issue and not 100 issues of some of the same aspects.

@pedrovsp

Problem is, that all these things should be concentrated in one issue and not 100 issues of some of the same aspects.

@Uzlopak I disagree with that logic. That keeps the number of defects down, but you'll end up with one gigantic defect with hundreds of issues, and fixing one is not tracked or documented anywhere in a clear way. It seems there are a bunch of issues closed as a duplicate of #1176 without any actual solutions provided.

Is there a solution to this margin issue specifically because I cannot find one anywhere?

Hi guys, is there any solution available? I'm struggling with this problem, but I haven't found the way to solve it outside the library.

So, if I understand it correctly, you are supposed to set margin by passing an array to the margin property.

doc.html(input, {
  margin: [left, top, right ,bottom] // the default is [0, 0, 0, 0]
  callback: myFunction(pdf) {
  }
}

But that doesn't work due to a bug in html2canvas, right?

@bytrangle #2924.

My best to set margin was

const pdf = new jsPdf({
        orientation: 'l',
        unit: 'pt',
        format: [canvas.width + 60, canvas.height + 160], // set surface larger according to desired margins
      });

      pdf.addImage(img, 'JPEG', 15, 40, canvas.width, canvas.height); // set margins there in image / 2 of margins above

hope it helps someone fix troubles quickly

My best to set margin was

const pdf = new jsPdf({
        orientation: 'l',
        unit: 'pt',
        format: [canvas.width + 60, canvas.height + 160], // set surface larger according to desired margins
      });

      pdf.addImage(img, 'JPEG', 15, 40, canvas.width, canvas.height); // set margins there in image / 2 of margins above

hope it helps someone fix troubles quickly

If there is only one page, then this way is OK. However, if it is more than one page, there is no margin at the bottom of the first page and at the top of the second page. helpless馃様
I mean the html method

@Uzlopak Any updates?

I am also looking for an update...

Hi, does anyone know how to fix this?

@Fernandogdo see #2924.

Was this page helpful?
0 / 5 - 0 ratings