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>
    	jsmith@email.com
      </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>

Answer 2

使用 JSPDF 我发现几乎没有限制。不再支持 fromHTML() 并且 html() 是我们可以从实例调用的当前方法，而且也不支持边距，因为 html() 使用第一个元素作为回调。

import React from 'react'
import { jsPDF } from 'jspdf'
import html2canvas from 'html2canvas'
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF({ orientation: 'landscape', unit: 'pt' })

const PDFDownload = ({ scenario }) => {
  function showPDF () {
    window.html2canvas = html2canvas
    try {
      const gameFeedback = document.querySelector('.game-feedback')
      doc.setFontSize(12)
      doc.html(gameFeedback, {
        callback: function (doc) {
          doc.save(`${scenario.name}.pdf`)
        }
      })
    } catch (err) {
      console.error(err)
    }
  }
  return (
    <button className='btn btn-primary' type='submit' onClick={showPDF}><i className='fas fa-file-download' />  PDF</button>
  )
}
export default PDFDownload

jsPdf将边距添加到pdf页面

2 个答案: