admin管理员组

文章数量:1023744

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?

  • javascript
  • css
  • jspdf
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 addHTML function, but here my example contains html function 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
 |  Show 2 more ments

2 Answers 2

Reset to default 1

Try 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>

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?

  • javascript
  • css
  • jspdf
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 addHTML function, but here my example contains html function 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
 |  Show 2 more ments

2 Answers 2

Reset to default 1

Try 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>

本文标签： javascriptjsPdf set margin using html() pluginStack Overflow

版权声明：本文标题：javascript - jsPdf: set margin using html() plugin - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745558055a2155994.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。