Jspdf: How to set bottom and top margin for addHTML

Created on 14 Sep 2017 · 12Comments · Source: MrRio/jsPDF

Hi,

I am not able to add margin to top and bottom for multiple pages. How can i add that?

Below code represents:
`

exportAsPdf() {
self = this;

const elementToPrint = document.getElementById('widgets'); //The html element to become a pdf

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

pdf.internal.scaleFactor = 2.25;

pdf.text(20, 30, "Dashboard");

let options = {
    pagesplit: true,
    background: '#fff',
    format: 'PNG',
    padding: 50,
    margin: {
        top: 40,
        bottom: 30
    }
};

let margins = {
    top: 40,
    bottom: 30
};

//pdf.rect(20, 20, pdf.internal.pageSize.width - 40, doc.internal.pageSize.height - 40, 'S');
// pdf.setDisplayMode("125%", "continuous");
pdf.addHTML(elementToPrint, 0, 30, options, () => {
    pdf.save('Dashboard.pdf');
});}

`
Please help me out.

Source

Sandeepvedam

All 12 comments

Change your title please. It is misleading... You have a problem with addHTML and not with addImage. Did you search the issues for your problem?

Uzlopak on 14 Sep 2017

Yeah. I have gone through many websites. I did not find any suitable for adding page margins to multiple pages.

Sandeepvedam on 14 Sep 2017

1372

Uzlopak on 14 Sep 2017

Okay. Thank you.

Sandeepvedam on 14 Sep 2017

try #1450

Uzlopak on 20 Sep 2017

Neither #1372 or #1450 is a solution for the text being cut in half at the bottom of a multipage pdf...You can add margin which will make your page look better but it will still cut your text in half because jspdf is taking screenshots and has no idea at what pixel your text begins or ends.

I am still looking for a solution to this issue...if you know exactly what text you have it's manageable but if the text is dynamic then I am not sure what a probable solution would be.