Get all the data of the table using jspdf and autotable

Question

I want to get all the data from my table, the problem is that I only get the data that is in the first page (because of the pagination). I have 200 register on my table, but the pagination only shows me 100 register, how could I get the other 100 register, that are in the next page with JSPDF and generate the PDF with the 200 register. My code is the following:

async captureAutoTable() {

    let imagen = await this.http.get('/assets/media/logos/logo_mw_h_dark_c10.png',{responseType: 'blob'}).toPromise();

    const doc = new jsPDF();

    let buffer = await new Response(imagen).arrayBuffer();
    let base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
    doc.addImage(base64,'PNG', 10, 10);

    doc.setFontSize(18);
    doc.setFontStyle('bold');
    doc.text('Reporte Estado de Proyecto', 70, 22);
    doc.setFontSize(11);
    doc.setTextColor(100);

    let pageSize = doc.internal.pageSize;
    let pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth();

    // Here I get the data from the table
    doc.autoTable({
      html: '#myTable',
      startY: 30,
      showHead: 'everyPage',
    });

    doc.save('table.pdf');
}

Answer 1

Your html table (#myTable) doesn't have all data because of pagination, so you export data that available in dom. To fix this issue you need to fetch all data from endpoint and then create appropriate columns and rows.

async captureAutoTable() {
    // fetch all data
    const data = await this.http.get();

    doc.autoTable({
      // html: '#myTable', // #myTable contains paginated data
      columns: // columns,
      body: // rows
      startY: 30,
      showHead: 'everyPage',
    });

    doc.save('table.pdf');
}

Examples: https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/examples/examples.js