从 Firestore 集合生成 jspdf auto table 内容

Question

我已经在 jspdf 中创建了一个报告，其中包含一个自动table。它将列出有关学生的一些数据，其来源在 Firestore 的集合中。我已经通过以下方式引用了该集合：

 const ref = collection (“students”).doc(“selectedStudent”).collection(“grades”)

在该集合中将有未定义数量的文档。他们每个人都是一个 object，其中包含大量我已经掌握的数据：

根据所有这些数据，我只会使用三个字段来动态填充 table，因此我的 table 代码如下：

doc.autoTable({
  head: [['Subject', 'Teacher', 'Achievements']],
  body: [
    ['Subject1', 'Teacher1', 'Lorem ipsum'],
    ['Subject2', 'Teacher2', 'Lorem ipsum'],
    // ...
  ],
})

我知道要实现它，我应该使用 forEach 函数或循环遍历集合，但我的知识有限，我不知道如何完成。这是我试过的：

let keys = ['asignatura', 'authorApellidos', 'logros'];
let bodyData = [], i, j, rowData;

    for (i = 0; i < ref.length; i++) {
        rowData = [];
        for (j = 0; j < keys.length; ++j) {
          let key = keys [j];
          rowData.push (ref [i][key]);
        }
        bodyData.push (rowData);
    }

    doc.autoTable({
    head: [['Asignatura', 'Profesor', 'Descripción']],
    startY: 137,
    headStyles: { fillColor: [50, 205, 50] },
    body: bodyData
    })

但是我有一个空的 table，我只看到头部但没有数据。

当我执行 console.log(ref) 时，我在控制台中看到的是：

也许来自 Firebase 的数据需要格式化。我不知道。

我将不胜感激任何帮助。谢谢！

Answer 1

您可以使用.map将数组中的每一项转换为具有相同长度和不同数据格式的数组

示例：

doc.autoTable({
  head: [['Subject', 'Teacher', 'Achievements']],
  body: ref.map(object => {
    return [object.subject, object.teacher, object.achievements];
  }),
});

或解构对象如下：

doc.autoTable({
  head: [["Subject", "Teacher", "Achievements"]],
  body: ref.map(({subject, teacher, achievements}) => { // <-- object destructuration
    return [subject, teacher, achievements];
  }),
});

因为这个 map 函数是直接 returning 新格式，你可以跳过 return 并制作 one-liner

doc.autoTable({
  head: [["Subject", "Teacher", "Achievements"]],
  body: ref.map(({subject, teacher, achievements}) => [subject, teacher, achievements]),
});

从 Firestore 集合生成 jspdf auto table 内容

Generate jspdf auto table content from Firestore collection

javascript

jspdf

jspdf-autotable

google-cloud-firestore