How can arrange the text and the logo properly?

user_15157684 0
Viewed 81

I wanted to have the logo on the left side of the word "Title" but it is currently at the lower part of the page. And the text "Sample" is being covered by the table. How can I re-arrange these text and images properly?

enter image description here

I recreated it here: https://codesandbox.io/s/js-pdf-with-data-printable-from-displayed-data-lup6ir?file=/src/App.js

Codes:

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");
    };
  };
jspdf-autotable jspdf reactjs javascript
1 Answers

Use didDrawPage callback of autoTable, like this :

 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 is working example.

user_58596540
Related