使用JSPDF-Autotable在同一文档中打印表和图表

Question

我如何使用JSPDF自动化印刷图表或图像和表格？ 假设我有一个图表，我想将其放在桌子上。 或者我有一些客户端自定义的HTML文本，我需要将其与自定义HTML下方的小表相结合。 我试图将最高边距提高到插入图像的开放空间，这有点有效。 但是，如果我不知道桌子前或之后必须插入元素的大小怎么办？

  async printThisThingsTogether() {
    const doc = new jsPDF('p', 'mm','a4');
    const marginsParent = { top: 105, bottom: 35, left: 15, right: 15 };
    doc.setFontSize(5);
    doc.setPage(1);

    var coolCanvas = document.getElementById('coolCanvas')! as HTMLCanvasElement;
    var newCanvasImg = coolCanvas!.toDataURL("image/png", 1.0)!;
    doc.addImage(newCanvasImg, 'PNG', 10, 10, 190, 90 );

    let page = document.getElementById(`table`) as HTMLTableElement;
    autoTable(doc, {
      html: page,
      margin: marginsParent,
      useCss: false,
      theme: 'plain',
      styles: {
        lineColor: [44, 62, 80],
        lineWidth: 1,
      },
      headStyles: {
        fillColor: [241, 196, 15],
        fontSize: 15,
      },
      footStyles: {
        fillColor: [241, 196, 15],
        fontSize: 15,
      },
      bodyStyles: {
        fillColor: [52, 73, 94],
        textColor: 240,
      },
      alternateRowStyles: {
        fillColor: [74, 96, 117],
      },
    });
    await doc.output('dataurlnewwindow', {filename: 'listagem.pdf'});
  }

Answer 1

如果要将表格/图像/HTML内容放在表格上方，则应设置自动操作的starty，这是指启动表的y点。

如果要将非表内容放在表面下方，则应获取表通过
doc.lastautotable.finaly其中 doc 涉及JSPDF实例。然后将内容放在其中。

希望它有帮助。

干杯