jQuery jsPdf 为pdf页面添加边距

jsPdf add margins to pdf page

提问by Ololo Ololo

I use jsPdf for creating pdf from html. How can I add margings (top, left, right) to my pdf page?

我使用 jsPdf 从 html 创建 pdf。如何将边距（顶部、左侧、右侧）添加到我的 pdf 页面？

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

Thanks for any help!

谢谢你的帮助！

回答by Dan Kreiger

JSPdf allows you to make a margin hash and apply it in your download i.e.

JSpdf 允许您制作保证金哈希并将其应用到您的下载中，即

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

Try this snippet below or this CodePen:

试试下面的这个片段或这个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">.99</td>
                  <td class="text-center">1</td>
                  <td class="text-right">.99</td>
                </tr>
                <tr>
                  <td>BS-400</td>
                  <td class="text-center">.00</td>
                  <td class="text-center">3</td>
                  <td class="text-right">.00</td>
                </tr>
                <tr>
                  <td>BS-1000</td>
                  <td class="text-center">0.00</td>
                  <td class="text-center">1</td>
                  <td class="text-right">0.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">0.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"></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">5.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>