使用来自多维数组的数据在 pdfmake 中创建动态表答案

【问题标题】：Create dynamic table in pdfmake with data from multidimensional arrays使用来自多维数组的数据在 pdfmake 中创建动态表
【发布时间】：2018-03-07 15:16:33
【问题描述】：

我必须从数据库中的数据生成 pdf。在屏幕截图中是一个示例，每个条目（以许可 ID 开头）都是对象中的一个数组，例如：

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'},
]

是否可以在 pdfmake 中为每个部分生成一个表格，还是我需要其他解决方案？例如我们有两个部分：

1.个人身份

2.状态 der Erlaubnisse

【问题讨论】：

标签： node.js pdfmake

【解决方案1】：

更新：相信您的问题已在此处直接解决 - https://github.com/bpampuch/pdfmake/issues/224

在最近的一个项目中遇到了类似的问题。在第一个答案中评论pdfmake: How to create multiple page pdf with different orientation? 绝地证明是有帮助的，就像PDFMAKE: How to Repeat Array[ ] Items in 'content' 的一个答案一样。

类似于以下 jQuery 的内容可能会有所帮助。将数据的 sn-p 放入对象中（使用列而不是表和换行符而不是边框），但这个概念应该有所帮助。添加了一些样式。基本上是循环遍历并将其推送到内容中。

    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();

【讨论】：

【解决方案2】：

对于动态数组宽度：

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;

【讨论】：