CODEWITHSUNDEEP
javascripthtmlcssjspdf
Maheer Ali
Maheer Ali

Reputation: 36564

How prevent cutting of content from mid when convert html to pdf using jspdf

I am creating a report viewer and it has an option to export the reports. The report can contain dynamic content and a table with dynamic no of rows.

const doc = new jspdf.jsPDF("portrait", "px", [3508, 2480]);
document.querySelector('button').onclick = () => {
  doc.html(document.body, {
    x: 0,
    y: 0,
    margin: [700, 0, 700, 0],
    callback: () => {
       doc.save();
    },
  });
}
*{font-size: 100px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
      <script
         src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
         integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
         crossorigin="anonymous"
         referrerpolicy="no-referrer"
      ></script>
<button>Export as pdf</button>
<table>
  <thead>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
  </thead>
  <tbody>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
    <tr>
      <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
    </tr>
  </tbody>
</table>

The pdf export was not working here in snippet so created a fiddle here . You will observe in the pdf that some of the text is cut from the middle. I want to prevent this. If content grows bigger that a4 size the content should only split by whole element.

In actual this I am generating some complex reports in react. Please provide some general solution.

Upvotes: 3

Views: 5984

Answers (1)

Besworks
Besworks

Reputation: 4483

Per the documentation, you need to add the option autoPaging:'text', which "Trys not to cut text in half across page breaks."

doc.html(document.body, {
  x: 0,
  y: 0,
  autoPaging: 'text',
  margin: [700, 0, 700, 0],
  callback: () => {
     doc.save();
  },
});

Upvotes: 3

Related Questions