What is the best way to dynamically insert content into a PDF using pdfmake?

Question

What is the best way to dynamically insert content into a PDF using pdfmake?

In my quest to dynamically generate PDFs using pdfmake, I've encountered an issue with creating dynamic rows based on data.

To illustrate, here is a simplified version of the code:

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

The method createRow functions as expected when used singularly, but when attempted to be generated dynamically (as shown in the example), the result is empty. I have tried various loops and methods but have been unable to resolve the issue. Is there a way to add content based on an array with an unknown size?

angular typescript pdfmake

Answer 1

Answer №1

You might want to double check your return array in the document method for missing commas, particularly after this.createRow
Remember that data.map() returns an array, so nesting it within another array will result in a nested array structure
Make sure the Y value is dynamic for each row; it should not be the same value for all rows

Consider implementing something similar to this:

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; // Adjust as needed
 
        return this.createRow(55, updatedRowY, item.version, { m: item.minutes, s: item.seconds }, [163, 205], updatedRowY + 6)
    });

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

Answer 2

You might want to double check your return array in the document method for missing commas, particularly after this.createRow
Remember that data.map() returns an array, so nesting it within another array will result in a nested array structure
Make sure the Y value is dynamic for each row; it should not be the same value for all rows

Consider implementing something similar to this:

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; // Adjust as needed
 
        return this.createRow(55, updatedRowY, item.version, { m: item.minutes, s: item.seconds }, [163, 205], updatedRowY + 6)
    });

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

Answer 3

Answer №2

Expand your result array of map operation. For example:

private document(data: DataResponse, user: UserResponse) {
     let rowY = 252;
     return [
         ...data.map((item) => this.createRow(55, rowY, item.version, { m: item.minutes, s: item.seconds }, [163, 205], rowY + 6)).map(() => rowY += 34),
     ];
}

Alternatively, you can use this approach:

private document(data: DataResponse, user: UserResponse) {
         let rowY = 252;
         return data.map((item) => this.createRow(55, rowY, item.version, { m: item.minutes, s: item.seconds }, [163, 205], rowY + 6)).map(() => rowY += 34);
    }

Explanation: When the function createRow is called without a loop, it returns as:

[  [
         this.createTable(10, version, time, {x: rowX, y: rowY}),
         this.circle(),
         this.circle(),
     ] ]

But when it is used in a loop, it adds an extra array due to the nature of the map loop returning an array itself:

[ 
 [
  [
    this.createTable(10, version, time, {x: rowX, y: rowY}),             
    this.circle(),
    this.circle(),
  ] 
 ]
]

Answer 4

Expand your result array of map operation. For example:

private document(data: DataResponse, user: UserResponse) {
     let rowY = 252;
     return [
         ...data.map((item) => this.createRow(55, rowY, item.version, { m: item.minutes, s: item.seconds }, [163, 205], rowY + 6)).map(() => rowY += 34),
     ];
}

Alternatively, you can use this approach:

private document(data: DataResponse, user: UserResponse) {
         let rowY = 252;
         return data.map((item) => this.createRow(55, rowY, item.version, { m: item.minutes, s: item.seconds }, [163, 205], rowY + 6)).map(() => rowY += 34);
    }

Explanation: When the function createRow is called without a loop, it returns as:

[  [
         this.createTable(10, version, time, {x: rowX, y: rowY}),
         this.circle(),
         this.circle(),
     ] ]

But when it is used in a loop, it adds an extra array due to the nature of the map loop returning an array itself:

[ 
 [
  [
    this.createTable(10, version, time, {x: rowX, y: rowY}),             
    this.circle(),
    this.circle(),
  ] 
 ]
]

What is the best way to dynamically insert content into a PDF using pdfmake?

Answer №1

Answer №2

Similar questions

Implementing the same concept yet yielding diverse variations?

Utilizing TypeScript to enhance method proxying

Angular design featuring numerical staircase pattern

Set the styling of a div element in the Angular template when the application is first initialized

Incompatibility with semantic versioning and npm versions 5 and higher

Is there a way to close a window in JavaScript that was opened using Ionic Capacitor?

Using the @Input directive in Angular to bind the disable attribute to a button component

Automatically update data in Angular without the need to refresh the page

Is the Angular maxlength parameter causing issues with user input?

How can I compel npm to resolve dependencies flatly?

Passing HTML content to an ng-bootstrap modal in Angular 2+

Repeatedly view the identical file on HTML

Incorporate any enum value into a Typescript interface

Analyzing a sizable JSON file serving as the data source for a PostgreSQL database

Having trouble accessing the object from @Input

Issues with Angular unit tests failing due to an unexpected phantomJS error

Unlock the encrypted information in the blockchain

Unable to perform module augmentation in TypeScript

What is the best way to define a precise return type for a JSX Element?

Error message: When working with Protobuf, an uncaught reference error occurs because the 'exports