How to Set Top and Bottom Margin in Addhtml

how to set top and bottom margin in addHTML

JSPDF allows margin and useFor Feature. You can set the margin properties like below:

const pdf = new jspdf('p', 'pt', 'a4'); // For A4 Sheet layout
pdf.addHTML(document.getElementById('print-section'), 25, 50, {
    retina: true,
    pagesplit: true,
    margin: {
      top: 50,
      right: 25,
      bottom: 50,
      left: 25,
      useFor: 'page' // This property is mandatory to keep the margin to supsequent pages
    }
  }, function() {
    pdf.save('test.pdf');
  });

See the output below:

How to set top and bottom margin in .HTML using jspdf

I think you forgot to add the margins variable into the .html()
I added it as an array below.

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

doc.html(document.getElementById('htmlData'), {
// Adjust your margins here (left, top, right ,bottom)
margin: [40, 60, 40, 60],
callback: function (pdf) {

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

margin-top change based on content height

.container {
  position: relative;
  margin-top: calc((100vh - 56vw)/2);
}

.video {
  opacity: .2;
  width: auto;
  vertical-align: middle;
  min-height: 60vh;
}

Using the aspect ratio we were able to achieve the desired layout.

---

Related Topics