jsPdf add margins to pdf page

Question

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

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

Thanks for any help!

Answer 1

Using JSPDF I found few limitation. fromHTML() is no longer supported and html() is the current method which we can call from an instance, moreover to it margin is also not supported as the html() uses first element as callback.

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

Answer 2

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

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

Try this snippet below or this 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>