Jspdf-autotable: Reset cursor

Created on 1 Nov 2016 · 16Comments · Source: simonbengtsson/jsPDF-AutoTable

I'm using React and every time I generate a PDF, cursor.y is set based on the last one created.
I've managed to solve this problem creating a method that resets the variable cursor, so every time I call the jsPDF's save or output, I call resetCursor.

src/main.js

jsPDF.API.resetCursor = function () {
    cursor = {};
}

bug

Source

juliobetta

👍2

Most helpful comment

It feels like setting this.autoTable.previous to false on new instance creation would fix the problem.

vladpke on 25 Jan 2017

🚀1 ❤1 🎉1 👍1

All 16 comments

Everytime doc.autoTable is called cursor should be set to the following:

    cursor = {
        x: settings.margin.left,
        y: settings.startY === false ? settings.margin.top : settings.startY
    };

That is not the case?

simonbengtsson on 1 Nov 2016

no... in my case, this is not enough. Somehow, it's accumulating the previous value.

juliobetta on 1 Nov 2016

Can you post some code or explain how your setup is differing from a default one? I have tried react before with the library and it should pose no issues.

simonbengtsson on 1 Nov 2016

@simonbengtsson

jsPDF-AutoTable version: 2.1.0
jsPDF: 1.3.2

Run this code twice and it will demonstrate the problem:

var columns = [
    { title: "A", dataKey: "A" },
    { title: "B", dataKey: "B" },
    { title: "C", dataKey: "C" }
];

var rows = [
    { A: "A", B: "B", C: "C" },
    { A: "A", B: "B", C: "C" }
];

var doc = new jsPDF('p', 'pt');
doc.setFontSize(20);
doc.setTextColor(40);
doc.setFontStyle('normal');
doc.text("YOLO", 10, 20);
doc.text("YOLO2", 10, 50);

doc.autoTable(columns, rows, {
    startY: doc.autoTableEndPosY() + 70,
    margin: { horizontal: 10 },
    styles: { overflow: 'linebreak' },
    bodyStyles: { valign: 'top' },
    columnStyles: { email: { columnWidth: 'wrap' } },
    theme: "striped"
});

doc.save('repro.pdf');

peters on 7 Dec 2016

👍2 ❤1

Okey got it! What do you think of adding a function like doc.autoTableReset()?

Meanwhile, one solution is to call doc.autoTable(); once without startY.

A simpler repro:

var columns = [
    { title: "A", dataKey: "A" },
    { title: "B", dataKey: "B" },
    { title: "C", dataKey: "C" }
];

var rows = [
    { A: "A", B: "B", C: "C" },
    { A: "A", B: "B", C: "C" }
];

for(var i = 0; i < 20; i++) {
    var doc = new jsPDF('p', 'pt');
    doc.autoTable(columns, rows, {
    startY: doc.autoTableEndPosY() + 10
    });
    doc.autoTable(columns, rows, {
    startY: doc.autoTableEndPosY() + 10
    });
    doc.save('repro.pdf');
}

simonbengtsson on 7 Dec 2016

👍2

@simonbengtsson

Okey got it! What do you think of adding a function like doc.autoTableReset()?

That would be nice :)

peters on 7 Dec 2016

👍1

Found a way to automatically reset the cursor after creating a new jspdf document. Should no longer be a need for adding a doc.autoTableReset() or similar.

simonbengtsson on 25 Dec 2016

I'm using version 2.3.1 and I'm still having the same problem.

vladpke on 25 Jan 2017

I'll take a look again.

simonbengtsson on 25 Jan 2017

I create a new instance of jspdf, I add a few tables, I save the pdf. I then create another instance of jspdf and add another table with startY set to doc.autoTableEndPosY() + 40. doc.autoTableEndPosY() now returns the endY of the last table in my first pdf instead of 0.

vladpke on 25 Jan 2017

It feels like setting this.autoTable.previous to false on new instance creation would fix the problem.

vladpke on 25 Jan 2017

🚀1 ❤1 🎉1 👍1

Updated this now. Fix will be available in version 3.0 released after some more testing.

simonbengtsson on 25 Jan 2017

👍1

I still see that v2.3.2 is the latest release...

bsionixxtech on 20 Jun 2017

Still got this problem in Ionic 2

Code:

            let doc = new jsPDF();
            let columns = [
                { title: "Dossier", dataKey: "dossierId" },
                { title: "ID", dataKey: "id" },
                { title: "ExpensesType", dataKey: "expenseType" },
                { title: "Comment", dataKey: "comment" },
                { title: "Total amount", dataKey: "totalAmount" },
                { title: "State", dataKey: "state" },
                { title: "Entry date", dataKey: "costTimestamp" },

            ];      
            this.dossierlist.forEach(dossier => {
                doc.autoTable(columns, dossier.itemlist, {  

                    startY : doc.autoTableEndPosY() + 10,                       
                    styles: {
                        fillColor: [152, 251, 152],
                        cellPadding: 3,
                        fontSize: 7,
                        valign: 'middle',
                        overflow: 'linebreak',
                        tableWidth: 'auto',
                        lineWidth: 'auto',
                        pageBreak : 'auto'
                    },
                    headerStyles: {
                        cellPadding: 3,
                        lineWidth: 0,
                        valign: 'top',
                        fontStyle: 'bold',
                        halign: 'left',
                        fillColor: [0, 180, 0],
                        textColor: [0, 0, 0],
                        fontSize: 9,    
                    }

                });
            });
            doc.save('Spesentabelle.pdf');
            this.dossierlist = [];          
            console.log("show report ")

landrit on 11 Jun 2018

Nevermind got it.
what i did:
doc.Autotable.previous = 0;

landrit on 13 Jun 2018

@simonbengtsson can you please help me i want to add to table in same row with different
image

here i am attaching some code so it can make some thought

const data = [];
    data.push([ '1', 'shubham', 'dave', 'milan', '13245']);
    data.push(['2', 'haresh', ' 11324', '', '132453' ]);
    data.push(['3', 'milan', 'vadher', '12345', '']);
    data.push(['4', 'axay', '', '' , '']);
    data.push(['5']);

    doc.autoTable({
      startY: curruntHeight,
      startX: 10,
      endX: 90,
      margin: 10,
      willDrawCell: drawCell,
      head: [['Sr.No', 'Particulars', 'Qty. after inert deduction', 'Price/Kg or Price/Pcs (Rs)', 'Amount (Rs)']],
      body: data,
      theme: 'grid',
      headStyles: { fillColor: [255, 255, 255], textColor: [0, 0, 0], lineWidth: 0.3, lineColor: [0, 0, 0] },
      bodyStyles: {
        textColor: [0, 0, 0],
        lineWidth: 0.3, lineColor: [0, 0, 0]
      },
      columnStyles: {
        0: { columnWidth: 1, halign: 'left' },
        1: { columnWidth: 1, halign: 'center'},
        2: { columnWidth: 1, halign: 'right' },
        3: { columnWidth: 1, halign: 'right' },
        4: { columnWidth: 1, halign: 'right' },
      },
    });

    const data1 = [];

    data1.push([ '1', 'dashdkjaksd``', 'dave', 'milan', '13245']);
    data1.push(['2', 'haresh', ' 11324', '', '132453' ]);
    data1.push(['3', 'milan', 'vadher', '12345', '']);
    data1.push(['4', 'axay', '', '' , '']);
    data1.push(['5']);

    doc.autoTable({
      startY: curruntHeight + 20,
      startX: 160,
      endX: 250,
      margin: 10,
      willDrawCell: drawCell,
      head: [['Sr.No', 'Particulars', 'Qty. after inert deduction', 'Price/Kg or Price/Pcs (Rs)', 'Amount (Rs)']],
      body: data1,
      theme: 'grid',
      headStyles: { fillColor: [255, 255, 255], textColor: [0, 0, 0], lineWidth: 0.3, lineColor: [0, 0, 0] },
      bodyStyles: {
        textColor: [0, 0, 0],
        lineWidth: 0.3, lineColor: [0, 0, 0]
      },
      columnStyles: {
        0: { columnWidth: 10, halign: 'left' },
        1: { columnWidth: 10, halign: 'center'},
        2: { columnWidth: 10, halign: 'right' },
        3: { columnWidth: 10, halign: 'right' },
        4: { columnWidth: 10, halign: 'right' },
      },
    });

i have to make two table at same row with different column in landscape mode??