jsPdf将页边距添加到pdf页面

Question

我使用jsPdf从html创建pdf。我怎样才能将页面（顶部，左侧，右侧）添加到我的pdf页面？

 var doc = new jsPDF('p', 'pt', 'letter'); 
    doc.addHTML($('#template_invoice')[0], function() { 
     ... 
    }); 

感谢您的帮助！

Answer 1

JSPdf使您可以保证金哈希，并在您下载应用它即

margins = { 
    top: 40, 
    bottom: 60, 
    left: 40, 
    width: 522 
}; 

试试下面这个片段或本CodePen：

$(document).ready(function() { 
 
    $(".btn").click(function() { 
 
    var doc = new jsPDF("p", "pt", "letter"), 
 
    source = $("#template_invoice")[0], 
 
    margins = { 
 
     top: 40, 
 
     bottom: 60, 
 
     left: 40, 
 
     width: 522 
 
    }; 
 
    doc.fromHTML(
 
     source, // HTML string or DOM elem ref. 
 
     margins.left, // x coord 
 
     margins.top, { 
 
     // y coord 
 
     width: margins.width // max width of content on PDF 
 
     }, 
 
     function(dispose) { 
 
     // dispose: object with X, Y of the last line add to the PDF 
 
     //   this allow the insertion of new lines after html 
 
     doc.save("Test.pdf"); 
 
     }, 
 
     margins 
 
    ); 
 
    }); 
 
});

.btn-info, 
 
.lead { 
 
    margin-top: 20px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container" id="template_invoice"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div class="invoice-title"> 
 
     <h2>Invoice</h2> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <p class="lead">Order # 12345</p> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <button class="btn btn-info pull-right">Download</button> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <address> 
 
     <strong>Billed To:</strong><br> 
 
    \t John Smith<br> 
 
    \t 1234 Main<br> 
 
    \t Apt. 4B<br> 
 
    \t Springfield, ST 54321 
 
     </address> 
 
    </div> 
 
    <div class="col-xs-6 text-right"> 
 
     <address> 
 
     <strong>Shipped To:</strong><br> 
 
    \t Jane Smith<br> 
 
    \t 1234 Main<br> 
 
    \t Apt. 4B<br> 
 
    \t Springfield, ST 54321 
 
     </address> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <address> 
 
    \t <strong>Payment Method:</strong><br> 
 
    \t Visa ending **** 4242<br> 
 
    \t jsmith@email.com 
 
     </address> 
 
    </div> 
 
    <div class="col-xs-6 text-right"> 
 
     <address> 
 
    \t <strong>Order Date:</strong><br> 
 
    \t March 7, 2014<br><br> 
 
     </address> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title"><strong>Order summary</strong></h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="table-responsive"> 
 
      <table class="table table-condensed"> 
 
       <thead> 
 
       <tr> 
 
        <td><strong>Item</strong></td> 
 
        <td class="text-center"><strong>Price</strong></td> 
 
        <td class="text-center"><strong>Quantity</strong></td> 
 
        <td class="text-right"><strong>Totals</strong></td> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
       <tr> 
 
        <td>BS-200</td> 
 
        <td class="text-center">$10.99</td> 
 
        <td class="text-center">1</td> 
 
        <td class="text-right">$10.99</td> 
 
       </tr> 
 
       <tr> 
 
        <td>BS-400</td> 
 
        <td class="text-center">$20.00</td> 
 
        <td class="text-center">3</td> 
 
        <td class="text-right">$60.00</td> 
 
       </tr> 
 
       <tr> 
 
        <td>BS-1000</td> 
 
        <td class="text-center">$600.00</td> 
 
        <td class="text-center">1</td> 
 
        <td class="text-right">$600.00</td> 
 
       </tr> 
 
       <tr> 
 
        <td class="thick-line"></td> 
 
        <td class="thick-line"></td> 
 
        <td class="thick-line text-center"><strong>Subtotal</strong></td> 
 
        <td class="thick-line text-right">$670.99</td> 
 
       </tr> 
 
       <tr> 
 
        <td class="no-line"></td> 
 
        <td class="no-line"></td> 
 
        <td class="no-line text-center"><strong>Shipping</strong></td> 
 
        <td class="no-line text-right">$15</td> 
 
       </tr> 
 
       <tr> 
 
        <td class="no-line"></td> 
 
        <td class="no-line"></td> 
 
        <td class="no-line text-center"><strong>Total</strong></td> 
 
        <td class="no-line text-right">$685.99</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>