Set the margin to pdf page

[suhasbhattu]

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?

[caliny97]

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.

[Uzlopak]

Duplicate of #1176

[pedrovsp]

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.

[Uzlopak]

@pedrovsp

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

[bluehazetech]

@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?

[jacekkoziol]

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.

[bytrangle]

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?

[HackbrettXXX]

@bytrangle #2924.

[IgorKurkov]

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

[CurryPaste]

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

[hotcakedev628]

@Uzlopak Any updates?

[Sun3]

I am also looking for an update...

[Fernandogdo]

Hi, does anyone know how to fix this?

[HackbrettXXX]

@Fernandogdo see #2924.

[akomm]

@pedrovsp

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

maybe you should ask microsoft to remove the "new issue" button and instead everyone just posts directly. This way everything will be concentrated in one place instead of 100 different.

/sarcasm

[Uzlopak]

You should see this in the right context. When I wrote this, html plugin was relatively new. I was the only maintainer and had bigger plans for this plugin. So it was easier for me to concentrate all issues regarding .html into one issue to handle it in a central place.

2 years passed. I have no time to program in this project.

If your biggest concern is, that I closed it, then I just reopen it hereby.

[HackbrettXXX]

I think this issue should be closed. With [email protected] you can pass margins to the html function and they should work. There are also two different pagination modes now.

[sudolphiin]

Instead of setting the format on the original jsPDF object, set the format on the addPage method like so:

var doc = new jsPDF();
doc.addPage(canvas.width + margin, canvas.height + margin);
doc.addImage
...

[haidi20]

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?

just set marign in css. it's can work.

[rushi20139]

//This seems to work for the most part :

let doc = new jsPDF('p', 'pt', 'a4');
let myImage = '../../../assets/logo.png';

doc.html(document.getElementById('htmlData'), {
// (unknown, unknown, unknown, left)
margin: [40, 60, 40, 60],
callback: function (pdf) {

pdf.output('dataurlnewwindow');
},
});

[clcoco]

//This seems to work for the most part :

let doc = new jsPDF('p', 'pt', 'a4'); let myImage = '../../../assets/logo.png';

doc.html(document.getElementById('htmlData'), { // (unknown, unknown, unknown, left) margin: [40, 60, 40, 60], callback: function (pdf) {

pdf.output('dataurlnewwindow'); }, });

It doesn't work properly, every new page has a different top margin. My guess is that it applies the bottom margin of the previous page

[hayyangovinda]

Hello ,I think it is ok now, the method .html accepts margin as option ,pass it ,,then it should be fine :

[anuhyakalvakala]

Hello ,I think it is ok now, the method .html accepts margin as option ,pass it ,,then it should be fine :

Thank you this is working. can we have any option where top margin and bottom margin are different something like [10,40,0]

[anuhyakalvakala]

Hello ,I think it is ok now, the method .html accepts margin as option ,pass it ,,then it should be fine :

Thank you this is working. can we have any option where top margin and bottom margin are different something like [10,40,0]

worked with [top,left,bottom,right]

[harvey56]

You can get the page width, define a custom padding value :

const padding = 10;
const pageWidth = doc.internal.pageSize.getWidth();

Then, in each element you add to your doc, such as doc.text, you set its x as pageWidth - padding :

doc.text('my text', pageWidth - padding, my_Y, { align: "justify" });