I am using the jsPDF to convert HTML into PDF file. It works fine but I want to add margin around the page so that text should not get cut when content splits into pages. But I didn't find any way to add margin to the PDF file. I am using following code to add the text. Note that I am using the new .html() plugin, not .addHtml(), which is deprecated, as indicated by their documentation. So this is NOT a duplicate of this question.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jsPDF-master/dist/jspdf.min.js"></script>
<script src=".js"></script>
</head>
<body>
<div id="content">
<label><span>Standard</span></label>
<label><span>Planning item number:</span></label>
</div>
<button onclick="exportPDF()" style="float:right;">Download</button>
<script>
function exportPDF () {
var pdf = new jsPDF('p', 'pt', 'a4');
var margins = {
top: 40, bottom: 60, left: 40, right: 200
};
pdf.html(document.getElementById("content"), {
callback : function (pdf) {
pdf.save("a4.pdf");
}
});
}
</script>
</body>
</html>
How to add margin to the PDF pages?
I am using the jsPDF to convert HTML into PDF file. It works fine but I want to add margin around the page so that text should not get cut when content splits into pages. But I didn't find any way to add margin to the PDF file. I am using following code to add the text. Note that I am using the new .html() plugin, not .addHtml(), which is deprecated, as indicated by their documentation. So this is NOT a duplicate of this question.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jsPDF-master/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen./dist/html2canvas.js"></script>
</head>
<body>
<div id="content">
<label><span>Standard</span></label>
<label><span>Planning item number:</span></label>
</div>
<button onclick="exportPDF()" style="float:right;">Download</button>
<script>
function exportPDF () {
var pdf = new jsPDF('p', 'pt', 'a4');
var margins = {
top: 40, bottom: 60, left: 40, right: 200
};
pdf.html(document.getElementById("content"), {
callback : function (pdf) {
pdf.save("a4.pdf");
}
});
}
</script>
</body>
</html>
How to add margin to the PDF pages?
Share Improve this question edited Feb 23, 2019 at 3:42 Weihui Guo 4,0176 gold badges38 silver badges61 bronze badges asked Feb 22, 2019 at 10:59 Suhas BhattuSuhas Bhattu 5515 silver badges23 bronze badges 7- 1 Possible duplicate of jsPdf add margins to pdf page – Kaddath Commented Feb 22, 2019 at 11:06
- i have used jsPdf, and i think that the best way to acplish your need is to edit the margin of your html and use jsPdf just for generating the pdf. – Hsaido Commented Feb 22, 2019 at 11:11
-
2
@Kaddath, that example contains the
addHTMLfunction, but here my example containshtmlfunction only. – Suhas Bhattu Commented Feb 22, 2019 at 11:15 - 1 @Hsaidooo, that can manage the top, left and right margin. but bottom margin cannot be handled. – Suhas Bhattu Commented Feb 22, 2019 at 11:18
- You are not using the margins object in your code. But I know that's not the reason it won't work anyway. – Weihui Guo Commented Feb 22, 2019 at 22:41
2 Answers
Reset to default 1Try adding this option in the method
autoPaging: 'text'
Your code will look like this
pdf.html(document.getElementById("content"), {
callback: function (pdf) {
pdf.save("a4.pdf");
},
autoPaging: 'text'
});Text won't get cut when content splits into pages
Margin would be passed in as part of the options object, which is the second argument to your pdf.html(element, options) call.
The acceptable values of the margin property are: number, array of 2 or array of 4:
margin: 40
OR
margin: [40,60]
OR
margin: [40,200,60,40]
See Worker.prototype.setMargin on line 499 of the jsPDF html plugin: https://artskydj.github.io/jsPDF/docs/modules_html.js.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jsPDF-master/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen./dist/html2canvas.js"></script>
</head>
<body>
<div id="content">
<label><span>Standard</span></label>
<label><span>Planning item number:</span></label>
</div>
<button onclick="exportPDF()" style="float:right;">Download</button>
<script>
function exportPDF () {
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.getElementById("content"), {
callback : function (pdf) {
pdf.save("a4.pdf");
},
margin: [40, 200, 60, 40]
});
}
</script>
</body>
</html>