Question

我正在玩一个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的数据。我不知道如何从中进行迭代并获取相应的数据，你能帮我解决这个问题吗？

Answer 1

我已经构建了一个带有循环的简单代码段来填充表格。将其直接粘贴到pdfmake playground，以便查看其效果。

问候！

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)

如何在javascript中迭代数组并以特定形式显示其内容？

1 个答案: