使用jspdf和autotable获取表的所有数据答案

【问题标题】：Get all the data of the table using jspdf and autotable使用jspdf和autotable获取表的所有数据
【发布时间】：2019-12-17 22:43:32
【问题描述】：

我想从我的表中获取所有数据，问题是我只获取第一页中的数据（因为分页）。我的桌子上有 200 个寄存器，但分页只显示了 100 个寄存器，我怎么能得到其他 100 个寄存器，它们在下一页中的 JSPDF 并使用 200 寄存器生成 PDF。我的代码如下：

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');
}

【问题讨论】：

标签： angular jspdf jspdf-autotable angular-cli-v7

【解决方案1】：

由于分页，您的 html 表 (#myTable) 没有所有数据，因此您导出了 dom 中可用的数据。要解决此问题，您需要从端点获取所有数据，然后创建适当的列和行。

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');
}

示例：https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/examples/examples.js

【讨论】：