在 html2pdf.js 中使用分页模式后如何添加边距？

Question

使用 html2pdf 将 html 转换为 pdf。 我需要在分页元素之后添加 margin-top 和 margin-bottom。

这是一个分页模式

FIDDLE 示例

var element = document.getElementById('element-to-print');


 var opt = {
            margin: [0, 0, 30, 0], //top, left, buttom, right,
            filename: 'my_file.pdf',
            image: {type: 'jpeg',quality: 0.98},
            html2canvas: {dpi: 192, scale: 2, letterRendering: true},
            pagebreak: {mode: 'avoid-all'},
            jsPDF: {unit: 'pt', format: 'a4', orientation: 'portrait'}
        };
        var worker = html2pdf();

            console.log(worker);
            worker.set(opt)
                  .from(element)
                  .toPdf()
                  .get('pdf')
                  .then(function (doc) {
                      var totalPages = doc.internal.getNumberOfPages();
                      for (var i=1; i<=totalPages; i++) {
                          if (i > 1) {
                            doc.setPage(i);
                            //?????
                          }
                      }

                 }).save();  

这是一个类似的案例。

Answer 1

在这里，我使用正确的分页符将内容拆分为两个 pdf 页面，并为每个页面设置了页边距。

<button id="btnTest">Generate PDF</button>
  <div id ="root">

  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  </div>
 <div id="nextpage1">
    Lorem Ipsum is simply dummied text of the printing and typesetting industry. 
 </div>

div {
   outline: red solid 1px;
   page-break-inside: avoid;
}
#nextpage1 {
  page-break-before: always;
}

 html2pdf().from(element).set({
   margin:       [1, 0, 0, 0], 
   filename: 'samplepdf.pdf',
   pageBreak: { mode: 'css', before:'#nextpage1'},
   jsPDF: {orientation: 'landscape', unit: 'in', format: 'letter'}
}).toPdf().get('pdf').then(function (pdf) {
   var totalPages = pdf.internal.getNumberOfPages();
   for (i = 1; i <= totalPages; i++) {
     pdf.setPage(i);
     pdf.setFontSize(10);
     pdf.setTextColor(150);
     pdf.text('This is the header text', (pdf.internal.pageSize.getWidth()/2.40), (pdf.internal.pageSize.getHeight()-8));      
     pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth()/2.25), (pdf.internal.pageSize.getHeight() - 1));
  }}).save();

尝试一下，请告诉我。