导出 html table 到 excel Angular 6

Question

我有一个这样的对象：

obj = {'a': [1, 2, 3], 'b': [0, 0,0], 'c': [1, 0, 4]}

我在 html table 中显示它是这样的：

Code | sum1 | sum2 | sum 3
a    | 1    |  2   | 3
b    | 0    |  0   | 0
c    | 1    |  0   | 4

我想将这个 table 导出到 excel。这是我的代码：

export() {
    let w = new Workbook();
    let ws = w.addWorksheet('Sheet 1');
    ws.addRow(['Code', 'sum1', 'sum2', 'sum3'])
    for (let i = 0; i < this.obj['a'].length; i++) {
      ws.addRow(['a', this.obj['a'][i]])
    }
    for (let i = 0; i < this.obj['a'].length; i++) {
      ws.addRow(['b', this.obj['b'][i]])
    }
    for (let i = 0; i < this.obj['a'].length; i++) {
      ws.addRow(['c', this.obj['c'][i]])
    }
}

但这不会在行上添加对象，而是在列上添加对象（像这样:)

Code | sum1 | sum2 | sum3
a    | 1    |      |
a    | 2    |      | 
a    | 3    |      |
b    | 0    |      |
b    | 0    |      |
b    | 0    |      |
c    | 1    |      |
c    | 0    |      |
c    | 4    |      |

我该如何解决这个问题？感谢您的宝贵时间！

Answer 1

您不需要迭代所有内部数组元素，这就是它创建许多行的原因。

考虑到 addRow 每次都会添加一行，因此您需要确保要添加的数组与数组 ['Code', 'sum1', 'sum2', 'sum3'] 的列数相同。使用 unshift 在每个相应数组的前面插入键（'a'、'b'、'c'）。

this.obj['a'].unshift('a');
ws.addRow(this.obj['a']);

对 'b' 和 'c' 执行相同的操作。

如果您不想修改原始数组，您也可以将 'a' 及其元素解压缩到一个新数组中。

（也可以迭代 obj 键，而不是将上面的行重复三次。）

迭代 unshift 键可能如下所示：

let k;
for (k of Object.keys(this.obj)) {

    this.obj[k].unshift(k);
    ws.addRow(this.obj[k]);
}

导出 html table 到 excel Angular 6

export html table to excel Angular 6

exceljs

angular

angular6