HTML to pdf example

by Faisal Khan Janjua

HTML

<div id="container">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap');
    * { font-family: 'Otomanopee One', sans-serif; }
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    tr:nth-child(even) {
      background-color: #dddddd;
    }
    .center {
      text-align: center;
    }
  </style>
  <div class="center">
    <h1>laugh out Loud is actually LoL</h1>
  </div>
  <div class="brk"></div>
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
  ...

CSS

#container {
  display: none;
}

JavaScript

$(document).on('click', 'button', function(){

  var element = $('#container').html();
  var newWindow = window.open();
  newWindow.document.write(element);
  
  var element = document.getElementById('container');
  var pdfFileName = 'file.pdf';
  const options = {
    // pagebreak: { before: '.brk', after: ['#xyz', '#after2'], avoid: 'img' },
    // margin: 0.5, // all sides
    margin: [0, 0.5, 0.3, 0.5], // top, left, bottom, right
    filename: pdfFileName,
    image: {
      type: 'jpeg',
      quality: 1
    },
    html2canvas: {
      dpi: 192,
      letterRendering: true
    },
    jsPDF: {
      unit: 'in',
      format: 'letter',
      orientation: 'portrait'
    }
  }
  html2pdf(element, options);
  // newWindow.close();
});