0

我正在玩一个http://pdfmake.org/#/按需生成 pdf 文件的库。我可以直接在那里设置所有必须打印的内容，并且由于我可以选择适当的布局，我决定使用一张桌子。

所以表格的代码如下：

table: {
    widths: ['*', '*', '*',200,'*', '*'], //setting up the dimension of each column
    body: [
    [ 'No1.', 'No2', 'No3', 'No4', 'No5', 'No6'], //header of each column
    [ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'], //first row
    [ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'] //second row, etc.
        ]
    }

我有一个表格，之前填充了 ajax 获取的数据：

client_data = JSON.parse(response);

当alert(client_data)我看到时[Object object],[Object object],[Object object], etc.。每个对象都包含必要的数据，所以我可以这样做：

var no1 = client_data.no1[0]

等等，现在我想在里面建立一个循环body: [ ]来替换现有的虚拟行：

 [ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'], //first row
 [ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'] //second row, etc.

来自 的数据client_data。我不知道如何从中迭代并获取适当的数据，你能帮我吗？

4

1 回答 1

0

我已经构建了一个简单的片段，其中包含一个用于填充表格的循环。将其直接粘贴到pdfmake 操场上，以便查看它的实际效果。

问候！

var client_data, dataTable, i, item, len, rows;
client_data = [
  {
    prop01: 'row01.prop01',
    prop02: 'row01.prop02',
    prop03: 'row01.prop03',
    prop04: 'row01.prop04',
    prop05: 'row01.prop05',
    prop06: 'row01.prop06'
  }, {
    prop01: 'row02.prop01',
    prop02: 'row02.prop02',
    prop03: 'row02.prop03',
    prop04: 'row02.prop04',
    prop05: 'row02.prop05',
    prop06: 'row02.prop06'
  }, {
    prop01: 'row03.prop01',
    prop02: 'row03.prop02',
    prop03: 'row03.prop03',
    prop04: 'row03.prop04',
    prop05: 'row03.prop05',
    prop06: 'row03.prop06'
  }
];

dataTable = {
  style: 'table',
  table: {
    widths: ['30%', '10%', '15%', '15%', '15%', '15%'],
    headerRows: 1,
    body: [
      [
        {
          text: 'No1',
          style: 'tableHeader'
        }, {
          text: 'No2',
          style: 'tableHeader'
        }, {
          text: 'No3',
          style: 'tableHeader'
        }, {
          text: 'No4',
          style: 'tableHeader'
        }, {
          text: 'No5',
          style: 'tableHeader'
        }, {
          text: 'No6',
          style: 'tableHeader'
        }
      ]
    ]
  },
  layout: {
    hLineWidth: function(i, node) {
      if (i === 0 || i === node.table.body.length) {
        return 0;
      } else if (i === node.table.headerRows) {
        return 2;
      } else {
        return 1;
      }
    },
    vLineWidth: function(i) {
      return 0;
    },
    hLineColor: function(i) {
      if (i === 1) {
        return '#2361AE';
      } else {
        return '#84a9d6';
      }
    },
    paddingLeft: function(i) {
      if (i === 0) {
        return 0;
      } else {
        return 8;
      }
    },
    paddingRight: function(i, node) {
      if (i === node.table.widths.length - 1) {
        return 0;
      } else {
        return 8;
      }
    }
  }
};

rows = dataTable.table.body;

i = 0;

len = client_data.length;

while (i < len) {
  item = client_data[i];
  rows.push([
    item.prop01, {
      text: item.prop02,
      alignment: 'right'
    }, {
      text: item.prop03,
      alignment: 'right'
    }, {
      text: item.prop04,
      alignment: 'right'
    }, {
      text: item.prop05,
      alignment: 'right'
    }, {
      text: item.prop06,
      alignment: 'center'
    }
  ]);
  i++;
}
var dd = {
    content: [],
    styles: {
        table: {
            margin: [0, 5, 0, 15]
        },
        tableHeader: {
            bold: true,
            fontSize: 10,
            color: '#2361AE'
        }
    },
    defaultStyle: {
        // alignment: 'justify'
    }

}

dd.content.push(dataTable)
于 2015-10-23T10:19:35.373 回答