如何正确安排文本和徽标？

发布于 2025-01-23 03:55:48 字数 1242 浏览 2 评论 0 原文

我想在“标题”一词的左侧有徽标，但目前位于页面的下部。桌子涵盖了文本“示例”。如何正确重新安排这些文本和图像？

我在这里重新创建它： https://codesandbox.io/s/js-pdf-with-data-data-printable-from-displayed-data-lup6ir?file=/src/src/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");
    };
  };

原文

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?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天涯沦落人 2025-01-30 03:55:48

使用 didDrawPage autotable 的回调，例如：

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

在这里正在工作示例。

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.

回复收藏 0 原文

~没有更多了~