jsPDF- html() new function has no feature to set margin to pdf page - jspdf

Question

i am using jsPDF into vue cli application, but i am unable to find any solution to set the margins to the pdf page. all the text and images are getting overflowed on the pages.
i want to set all the four margins. the syntax to set margins given in the jsPDF documentation is also not working.
this is my function to generate and download pdf:
downloadpdf() {
var pdf = new jsPDF("p", "pt", "a4");
pdf.setFontSize("10");
pdf.setLineWidth("100");
pdf.setTextColor("darkblue");
// Printing text
var vuejsinformation = `JQuery is a lightweight, "write less, do more", JavaScript library.`;
pdf.text(vuejsinformation, 10, 10);
//pdf.save("Sample.pdf");
// Printing a complete div container who has class pdfrapper
pdf.html(window.jQuery(".pdfwrapper").get(0), {
callback: function (pdf) {
pdf.save("Sample.pdf");
},
x: 10,
y: 10,
});
},
how to set all the four margins ?

Answer 1

You can add an option var in the jspdf.html() method like this:
jspdf.html(src, {
margin: number,
html2canvas: {width: number, height: number, ...}
...
})
However there seems to be an issue where the margin is ignored when using this method see https://github.com/MrRio/jsPDF/issues/2924.
It will probably be fixed soon :).
Here's the documentation for the jspdf.html() method http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html

Answer 2

This example for jsPDF version 2.1.1 should give you an idea on how to setup the margins.
var pageWidth = 8.5,
lineHeight = 1.2,
margin = 0.5,
maxLineWidth = pageWidth - margin * 2,
fontSize = 24,
ptsPerInch = 72,
oneLineHeight = (fontSize * lineHeight) / ptsPerInch,
text =
"Two households, both alike in dignity,\n" +
"In fair Verona, where we lay our scene,\n" +
"From ancient grudge break to new mutiny,\n" +
"Where civil blood makes civil hands unclean.\n" +
"From forth the fatal loins of these two foes\n" +
"A pair of star-cross'd lovers take their life;\n" +
"Whole misadventured piteous overthrows\n" +
"Do with their death bury their parents' strife.\n" +
"The fearful passage of their death-mark'd love,\n" +
"And the continuance of their parents' rage,\n" +
// Notice that the following will be wrapped to two lines automatically!
"Which, but their children's end, nought could remove, Is now the two hours' traffic of our stage;\n" +
"The which if you with patient ears attend,\n" +
"What here shall miss, our toil shall strive to mend.",
doc = new jsPDF({
unit: "in",
lineHeight: lineHeight
}).setProperties({ title: "String Splitting" });
// splitTextToSize takes your string and turns it in to an array of strings,
// each of which can be displayed within the specified maxLineWidth.
var textLines = doc
.setFont("helvetica")
.setFontSize(fontSize)
.splitTextToSize(text, maxLineWidth);
// doc.text can now add those lines easily; otherwise, it would have run text off the screen!
doc.text(textLines, margin, margin + 2 * oneLineHeight);
// You can also calculate the height of the text very simply:
var textHeight = (textLines.length * fontSize * lineHeight) / ptsPerInch;
doc
.setFont("Helvetica", "bold")
.text(
"Text Height: " + textHeight + " inches",
margin,
margin + oneLineHeight
);