如何在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",
  },

我想打印名字、姓氏、houseNo、地址、总额、购物车项目（仅名称和颜色），然后打印 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

它显示[对象，对象]的原因是，当您

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

实际上是在不用任何数据转换的情况下推动整个数据对象，将其逐一推向行阵列。因此，在house no。列上，[object，object]实际上表示cartitems对象，以及address> address> address> address>对象]实际上是OrderCreatEdat的值。

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

另外，对于OrderCreateDat列，我猜您是从firebase获取数据，因此您可能需要从 firebase/firestore/firestore 包装进行转换，但人们还发现您可以将时间戳转换为与此公式。

希望它有帮助。