首页 > javascript > 如何在addHTML中设置顶部和底部边距

如何在addHTML中设置顶部和底部边距 (how to set top and bottom margin in addHTML)

2019-04-10 javascript

问题

如何在多个页面添加margin-bottom和top pdf?

我添加了插件jspdf和html2canvas。

               var pdf = new jsPDF( 'p', 'mm', [400, 455]);       
               var specialElementHandlers = {
                '#exportthis': function (element, renderer) {
                    return true;
                    }
                };

                margins = {
                    bottom:10,
                    top:10,
                    left:10,
                    right:10
               };


            pdf.addHTML(document.getElementById('exportthis'), 5, 10, {pagesplit: true },
                   function(dispose){
                    var pageCount = pdf.internal.getNumberOfPages(); 
                    for(i = 0; i < pageCount; i++) { 
                    pdf.setPage(i); 
                    pdf.text(195,450, pdf.internal.getCurrentPageInfo().pageNumber + "/" + pageCount +"\n");   
                 }
               pdf.save("Report.pdf");
            },margins);

产量

在此输入图像描述

解决方法

JSPDF允许margin和useFor Feature。您可以设置以下边距属性:

const pdf = new jspdf('p', 'pt', 'a4'); // For A4 Sheet layout
pdf.addHTML(document.getElementById('print-section'), 25, 50, {
    retina: true,
    pagesplit: true,
    margin: {
      top: 50,
      right: 25,
      bottom: 50,
      left: 25,
      useFor: 'page' // This property is mandatory to keep the margin to supsequent pages
    }
  }, function() {
    pdf.save('test.pdf');
  });

见下面的输出:

在此输入图像描述

问题

how to add margin-bottom and top at multiple pages pdf?

I added plugins jspdf and html2canvas.

               var pdf = new jsPDF( 'p', 'mm', [400, 455]);       
               var specialElementHandlers = {
                '#exportthis': function (element, renderer) {
                    return true;
                    }
                };

                margins = {
                    bottom:10,
                    top:10,
                    left:10,
                    right:10
               };


            pdf.addHTML(document.getElementById('exportthis'), 5, 10, {pagesplit: true },
                   function(dispose){
                    var pageCount = pdf.internal.getNumberOfPages(); 
                    for(i = 0; i < pageCount; i++) { 
                    pdf.setPage(i); 
                    pdf.text(195,450, pdf.internal.getCurrentPageInfo().pageNumber + "/" + pageCount +"\n");   
                 }
               pdf.save("Report.pdf");
            },margins);

output

enter image description here

解决方法

JSPDF allows margin and useFor Feature. You can set the margin properties like below:

const pdf = new jspdf('p', 'pt', 'a4'); // For A4 Sheet layout
pdf.addHTML(document.getElementById('print-section'), 25, 50, {
    retina: true,
    pagesplit: true,
    margin: {
      top: 50,
      right: 25,
      bottom: 50,
      left: 25,
      useFor: 'page' // This property is mandatory to keep the margin to supsequent pages
    }
  }, function() {
    pdf.save('test.pdf');
  });

See the output below:

enter image description here

相似信息