Create dynamic table in pdfmake with data from multidimensional arrays

Question

I have to generate an pdf from data from an database. In the screenshot is an example, every entry (begins with the consentId) is an array within objects like:

const data = [
    {key: 'Consent ID:', entry: 5711},
    {key: 'Version:', entry: '1.0.1'},
    {key: 'Status:', entry: 'gegeben'},
    {key: 'Legal Text:', entry: 'Ich bin einverstanden. dass O2 mich 
    über O2-Produkte informiert und zwar per E-Mail, sonstiger elektronischer 
         Nachrichten und Telefon.'},
    {key: 'Eigenschaften:', entry: ''},
    {key: 'Email:', entry: ''},
    {key: 'Sonstige elektronische Nachrichten:', entry: ''},
    {key: 'Verkersdaten:', entry: ''},
],
[
    {key: 'Consent ID:', entry: 5716},
    {key: 'Version:', entry: '1.0.1'},
    {key: 'Status:', entry: 'gegeben'},
    {key: 'Legal Text:', entry: 'Ich bin einverstanden. dass O2 mich 
    über O2-Produkte informiert und zwar per E-Mail, sonstiger 
    elektronischer Nachrichten und Telefon.'},
    {key: 'Eigenschaften:', entry: ''},
    {key: 'Bestandsdaten:', entry: 'gegeben'},
    {key: 'verkehrsdaten:', entry: 'gegeben'},
]

Is it possible to generate an table in pdfmake for each section or do i need an other solution? For example we have two sections:

1. Status der Einwilligungen

2. Status der Erlaubnisse

Coke Morgan · Answer 1 · 2018-03-17T17:52:31.013

UPDATE: Believe your question is directly addressed here - https://github.com/bpampuch/pdfmake/issues/224

Had a similar issue on a recent project. Comment in the first answer here pdfmake: How to create multiple page pdf with different orientation? by jedi proved helpful, as did the one answer at PDFMAKE: How to Repeat Array[ ] Items in 'content'.

Something along the lines of the following bit of jQuery might help. Put a snippet of your data into an object (used columns instead of tables and newlines instead of borders) but the concept should assist. Added a little styling. Basically looping through and pushing it into content.

    var Einwilligungen = [];
    Einwilligungen.push({
        consentID:5711,
        version:'1.0.1'
    });
    Einwilligungen.push({
        consentID:5716,
        version:'1.0.1'
    });

    var Erlaubnisse = [];
    Erlaubnisse.push({
        consentID:5711,
        version:'1.0.1'
    });
    Erlaubnisse.push({
        consentID:5716,
        version:'1.0.1'
    });

    var dd = {
        content: [],
        styles: {
            f18: {
                fontSize: 18
            },
            strong: {
                bold: true
            }
        },
    };
    dd.content.push({text: 'Status der Einwilligungen', style: ['f18','strong'] });
    for(var i=0;i<Einwilligungen.length;i++) {
        dd.content.push({ columns:[{text: 'Consent ID', bold:true},{text: Einwilligungen[i].consentID}]});
        dd.content.push({ columns:[{text: 'Version', bold:true},{text: Einwilligungen[i].version}]});
        dd.content.push(' ');
    }
    dd.content.push(' ');
    dd.content.push({text: 'Status der Erlaubnisse', style: ['f18','strong'] });
    for(var i=0;i<Erlaubnisse.length;i++) {
        dd.content.push({ columns:[{text: 'Consent ID', bold:true},{text: Erlaubnisse[i].consentID}]});
        dd.content.push({ columns:[{text: 'Version', bold:true},{text: Erlaubnisse[i].version}]});
        dd.content.push(' ');
    }

    pdfMake.createPdf(dd).open();

score 1 · Answer 2 · edited May 20 '20 at 05:53

For dynamic array width:

let widthArray=[]
let widthPerc =(100/this.userColumDfs.length)
for(let i=0; i<this.userColumDfs.length; i++){
  widthArray.push(widthPerc+"%")
}

console.log("widthArray",widthArray);


var documentDefinition = {
  pageOrientation: 'landscape',
  content: [
    { text: this.fileName, style: 'header' },
    { table: { headerRows:1, widths:widthArray, body: tableData } },
  ],
  styles: {
    header: { fontSize: 18, bold: true, margin: [0, 10, 0, 10], alignment: 'center' },
    tableHeader: { fillColor: '#0d989c', color: 'white' }
  }
};
return documentDefinition;

Create dynamic table in pdfmake with data from multidimensional arrays

2 Answers2