如何在 jsPDF 中打印这些动态数据？

Question

我有这些示例数据：

{
    lastName: "dasdasd",
    totalAmount: 400,
    cartItems: [
      {
        color: "Black",
        size: "500",
        quantity: 2,
        cat: "ML",
        name: "Tumbler",
        price: 200
      }
    ],
    orderCreatedAt: { seconds: 1647338693, nanoseconds: 319000000 },
    Address: "France",
    houseNo: "7",
    firstName: "Anna",
  },

我想打印名字、姓氏、房号、地址、总金额、购物车商品（仅限名称和颜色），然后是 orderCreatedAt 的时间戳日期。我在 codesandbox 中重新创建了这个：https://codesandbox.io/s/js-pdf-78272j?file=/src/App.js:184-627

  const handlePrint = () => {
    console.log("clicked");
    const doc = new jsPDF();
    doc.text("Order details", 20, 10);
    const columns = [
      "First Name",
      "Last Name",
      "House No.",
      " Address",
      " Cart Items",
      "Total Amount",
      "Order Created At"
    ];
    const rows = [];
    data.map((item) => rows.push(Object.values(item)));

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

使用这些代码，它将打印此数据。它没有排列，然后显示 [Object,object]

Answer 1

它显示 [Object,Object] 的原因是当你这样做时

data.map((item) => rows.push(Object.values(item)));

你实际上是在没有任何数据转换的情况下将整个数据对象一个一个地推送到rows数组中。所以在 House No. 列上， [Object,Object] 实际上代表 cartItems 对象，而在 Address 列上 [Object,Object] 实际上是 [=15= 的值].

现在您定义的columns与您拥有的数据对象不一致，因此您需要先进行一些数据转换。我已经编辑了codesandbox here 供您参考。

另外，对于 orderCreatedAt 列，我猜您是从 firebase 获取数据，因此您可能需要从 firebase/firestore package to do the conversion, but people also found out you can convert the Timestamp to Date with this .

导入时间戳

希望对您有所帮助。

如何在 jsPDF 中打印这些动态数据？

How can I print these dynamic data in jsPDF?

javascript

reactjs

jspdf

jspdf-autotable