如何在pdfmake中动态添加内容？

Question

我想用 pdfmake 动态生成 pdf。除了基于数据创建动态行之外，我一切正常。

我在这个例子中简化了我的代码：

getDocumentDefinition(img: string, data: DataResponse, user: UserResponse): TDocumentDefinitions {
    return {
        header: this.header(img),
        content: this.document(data, user),
        styles: this.applyStyles(),
    };
}

private document(data: DataResponse, user: UserResponse) {
     let rowY = 252;
     return [
         // works
         this.createRow(55, rowY, 1, { m: 10, s: 30 }, [163, 205], rowY + 6)

         // not working in loop
         data.map((item) => this.createRow(55, rowY, item.version, { m: item.minutes, s: item.seconds }, [163, 205], rowY + 6)).map(() => rowY += 34),
     ];
}

private createRow(rowX: number, rowY: number, version: number, time: { m: number; s: number }, x: number[], y: number): Content {
     return [
         this.createTable(10, version, time, {x: rowX, y: rowY}),
         this.circle(),
         this.circle(),
     ];
}

private createTable(heights: number, version: number, time: { m: number, s: number }, position: { x: number; y: number }): Content {
     return {
         table: {
             widths: ['10%', '30%', '30%', '30%'],
                heights: heights,
                body: [
                  [
                     {
                         text: version,
                         fontSize: 10,
                         borderColor: ['white', 'white', 'white', '#B3CCE6'],
                      },
                      {
                         text: time.m + 'm ' + time.s + 's',
                         fontSize: 10,
                         borderColor: ['white', 'white', 'white', '#B3CCE6'],
                      },
                      {
                         text: '',
                         fontSize: 10,
                         borderColor: ['white', 'white', 'white', '#B3CCE6'],
                      },
                      {
                         text: '',
                         fontSize: 10,
                         borderColor: ['white', 'white', 'white', '#B3CCE6'],
                      },
                   ],
                ],
            },
            absolutePosition: position,
        };
}

方法 createRow 在任何循环之外工作，但一旦动态生成（参见上面的示例），返回值为空。我尝试了各种循环和东西，但我无法让它工作。如果可能的话，我想添加这样的单行。有想法该怎么解决这个吗？是否可以基于未知大小的数组添加内容？

Answer 1

1. 看起来您在

   document

   方法中的返回数组中在

   this.createRow

之后缺少一个逗号

2. data.map()

   返回一个数组，当您将其包含在另一个数组中时，最终会得到一个嵌套数组
3. 所有动态行都有相同的 Y 值；我相信它应该是一个动态值

我建议这样：

private document(data: DataResponse, user: UserResponse) {
    let rowY = 252;

    const staticContent = [
        this.createRow(55, rowY, 1, { m: 10, s: 30 }, [163, 205], rowY + 6)
    ];

    const dynamicContent = data.map((item, index) => {
        let updatedRowY = rowY + index * someYIncrementValue; // Update this based on your needs
 
        return this.createRow(55, updatedRowY, item.version, { m: item.minutes, s: item.seconds }, [163, 205], updatedRowY + 6)
    });

    return [...staticContent, ...dynamicContent];
}