logo标签列表

jsPdf：使用html()插件设置边距

javascriptcssjspdf
6
我正在使用jsPDF将HTML转换为PDF文件。它运行良好，但我想在页面周围添加边距，以便内容分页时不会被切断。但我没有找到任何添加PDF文件边距的方法。我正在使用以下代码添加文本。请注意，我正在使用新的.html()插件，而不是.addHtml()，因为他们的文档中标明<已弃用>。所以这不是<这个问题>的重复。
<!DOCTYPE html>
 <html lang="en">
<head>
    <script src="jsPDF-master/dist/jspdf.min.js"></script>
    <script src="https://html2canvas.hertzen.com/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>

如何在PDF页面中添加边距？
1
可能是重复的问题：jsPdf如何给pdf页面添加边距。 - Kaddath
2
@Kaddath，那个例子包含addHTML函数，但是我的例子中只包含html函数。 - Suhas Bhattu
1
@Hsaidooo，可以管理顶部、左侧和右侧的边距。但是底部边距无法处理。 - Suhas Bhattu
@SuhasBhattu 你目前有找到任何解决方案吗？ - Darshana
这是一个（公开的）错误：https://github.com/MrRio/jsPDF/issues/2924 - Daniel Pl.
显示剩余2条评论
2个回答
1

尝试在该方法中添加此选项

autoPaging: 'text'

你的代码将会是这样的

pdf.html(document.getElementById("content"), {
  callback: function (pdf) {
    pdf.save("a4.pdf");
  },
  autoPaging: 'text'
});

当内容分页时，文本不会被截断

0

Margin会作为选项对象的一部分传递，它是传递给pdf.html(element, options)函数的第二个参数。

Margin属性可接受的值包括数字、长度为2的数组或长度为4的数组： margin: 40 或者 margin: [40,60] 或者 margin: [40,200,60,40]

请参考jsPDF HTML插件的Worker.prototype.setMargin函数第499行： 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.com/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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接