pdfMake - how to get each table data group starts on a new page

user_1299388 0
Viewed 199

With the following code: stackblitz here

itemsArray = [
    { id : 'A1', name : 'Name A1'},
    { id : 'B2', name : 'nameB2'},
    { id : 'A3', name : 'nameA3'},
    { id : 'A2', name : 'nameA2'},
    { id : 'B1', name : 'nameB1'},
];

constructor() {
    pdfMake.vfs = pdfFonts.pdfMake.vfs;
}

getItems(): void {
        this.items = _.orderBy(
            this.itemsArray,
            item => [ item.id, ],
            ['asc']
        );
        this.groupedItems =  _.groupBy( this.items,  item => [ item.id.substring(0,1)] );
}

buildTableBody(data, columns): any {
    const body = [];
    body.push(columns);

    data.forEach((row) => {
        const dataRow = [];
        columns.forEach((column) => {
            if (column.text === 'id')
            {
                dataRow.push(row['id']);
            }
            else if (column.text === 'name')
            {
                dataRow.push(row['name']);
            }
        });
        body.push(dataRow);
    });
    return body;
}

table(data, columns): any {

    return {
        table: {
            headerRows: 1,
            body: this.buildTableBody(data, columns),
        },
    };
}

createPdf(): void {
    this.getItems();
    console.log(this.groupedItems);

    const dd = {
        content: [
            this.table(
                this.items,
                [{ text: 'id'}, { text: 'name'}],
            ),
    ],
    };
    pdfMake.createPdf(dd).open();
}

I got the below result

enter image description here

But could not find a way to split the data groups, where each group should start on a new page:

group A:

enter image description here

group B:

enter image description here

Does someone can help on this ?

pdfmake lodash angular typescript
1 Answers

I have no experience with Pdfmake but it seems you can set the pageBreak field to manually go to next page.
Did some transformation on the groupedItems to create a table list containing the title (eg Group A Page 1) and to set pageBreak:'after' unless you are at the last table.
Used lodash chain to chain functions

  createPdf(): void {
      this.getItems();
      const tableListWithPageBreakAndTitle = _.chain(this.groupedItems)
      .map((val,key)=> { //map and transform..returns array of arrays
        return [
          { text: `Group ${key}`,},
          this.table(
          val,
          [{ text: 'id'}, { text: 'name'}]),
          { text: ' '}
        ]
      })
      .flatMap((group,idx)=>{ //mapping array and flattening it 
        group[0].text += ` Page ${idx+1}`; //add page number
        //add page break if it is not last table
        if(idx+1 !== _.size(this.groupedItems)) group[2].pageBreak = 'after';
        return group
      })
      .value()
      //console.log(tableListWithPageBreakAndTitle)
      const dd = {
          content: [
              ...tableListWithPageBreakAndTitle,
              { text: 'The above table should be splitted into two groups, the second group (B1 and B2) along with the header on top, should show after page break' },
            ],
        };
      pdfmake.createPdf(dd).open();
    }
user_135835100
Related