CODEWITHSUNDEEP
reactjsjspdf
Geralt
Geralt

Reputation: 31

How to avoid table data splitting between two pages using jspdf

Is there a way to fix data splitting between two pages (I've posted the image of the issue below). I'm passing a template to doc.html() and im using jspdf to generate a pdf file. Everything is displayed as it should except the table data - the table data splits between two pages (see image below).

This is the part of the code to generate the pdf. HTMLTemplate is html template im passing to it (divs and tables with data)

let doc = new jsPDF("p", "pt", "a4");

doc.html(renderToString(<HTMLTemplate />), {
margin: [20, 0, 20, 0]
 async callback(doc) {
        // save the document as a PDF
        doc.save(name_pdf_file, { returnPromise: true }).then(SetValue()); // Ignore this
      },
    });

enter image description here

Upvotes: 1

Views: 460

Answers (1)

Pro Ismael
Pro Ismael

Reputation: 1

I recommand you to use jspdf-autotable :https://github.com/simonbengtsson/jsPDF-AutoTable this is a jsPDF plugin for generating PDF tables. And there is an exemple here:

import jsPDF from 'jspdf';
import 'jspdf-autotable';

const doc = new jsPDF();

const longText = 'Ceci est un texte très long qui ne tiendra pas sur une seule ligne dans la cellule du tableau. Il sera donc divisé en plusieurs lignes.';

doc.autoTable({
    head: [['Titre 1', 'Titre 2']],
    body: [
        ['Texte court', longText],
        ['Texte court', longText],
    ],
    styles: { cellWidth: 'wrap', overflow: 'linebreak' }, // Utiliser 'wrap' et 'linebreak' pour éviter de couper les lignes
});

Upvotes: 0

Related Questions