jsPdf add margins to pdf page

40,619

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
Share:
40,619
Ololo Ololo
Author by

Ololo Ololo

Updated on March 17, 2021

Comments

  • Ololo Ololo
    Ololo Ololo about 3 years

    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!