如何正确安排文字和标志？

Question

我想将徽标放在“标题”一词的左侧，但它目前位于页面的下部。 table 覆盖了文本“Sample”。我怎样才能re-arrange这些文字和图片正确？

我在这里重新创建了它：https://codesandbox.io/s/js-pdf-with-data-printable-from-displayed-data-lup6ir?file=/src/App.js

代码：

const handlePrint = () => {
    console.log("clicked");
    const doc = new jsPDF();

    var img = new Image();
    img.src = require("./assets/logo-social.png");

    img.onload = () => {
      // await for the image to be fully loaded
      doc.addImage(img, "png", 10, 78, 12, 15);
      doc.text("Title here", 20, 10);
      doc.text("Sample", 20, 15);

      const columns = ["Data"];
      const rows = [];
      data.map((item) =>
        rows.push([
          item.cartItems.map(
            (item) => `${item.name}: ${item.color} = ${item.quantity}`
          )
        ])
      );

      doc.autoTable(columns, rows);
      doc.save("order.pdf");
    };
  };

Answer 1

使用 autoTable 的 didDrawPage 回调，像这样：

 var finalY = doc.lastAutoTable.finalY || 10;
           ...

  doc.autoTable(columns, rows, {
    startY: finalY + 20,
    showHeader: "never",
    didDrawPage: function (data) {
      // Header
      doc.setFontSize(20);
      doc.setTextColor(40);
      doc.text("Title here", data.settings.margin.left + 21, 22);
      doc.text("subtittle here", data.settings.margin.left + 21, 28);
      doc.addImage(img, "png", 10, 15, 25, 15);
    }
  });

Here 是工作示例。

如何正确安排文字和标志？

How can arrange the text and the logo properly?

javascript

jspdf

reactjs

jspdf-autotable