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>
    	John Smith<br>
    	1234 Main<br>
    	Apt. 4B<br>
    	Springfield, ST 54321
      </address>
    </div>
    <div class="col-xs-6 text-right">
      <address>
        <strong>Shipped To:</strong><br>
    	Jane Smith<br>
    	1234 Main<br>
    	Apt. 4B<br>
    	Springfield, ST 54321
      </address>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <address>
    	<strong>Payment Method:</strong><br>
    	Visa ending **** 4242<br>
    	[email protected]
      </address>
    </div>
    <div class="col-xs-6 text-right">
      <address>
    	<strong>Order Date:</strong><br>
    	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>