angularjs 导出excel php,AngularJS 导出Excel指令

Excel导出思路

项目中使用到了导出Excel功能,潘老师已经在博客中将表格导出为csv的技术难点实现,剩下的,只是根据实际的业务需求对该指令进行完善。

大体遇到了以下几个问题:

功能按钮不导出

bVbbH4J?w=1310&h=86

因为原指令默认导出表格所有的内容,第一次直接导出时,发现直接将查看、编辑这几个按钮的HTML代码都导出去了,我们要的应该是人员信息和人员资质信息。

指令添加参数:有效数据列数。

如图,这里的有效数据列就是市、区县等等一直到有效期至,一共15列,作为参数传给导出指令。

self.exportCols = scope.exportCols;

for (let i = 0; i < table.rows.length; i ++) {

// 获取每行的数据

var rowData = table.rows[i].cells;

// 如果该列为正常列,循环内容

for (let j = 0; j < self.exportCols; j ++) {

// 如果该列不存在,则赋值为空内容

var data = rowData[j] === undefined ? '' : rowData[j].innerHTML;

// 拼接内容,用逗号分隔

csvString = csvString + data + ",";

}

// 删除最后多余的逗号

csvString = csvString.substring(0, csvString.length - 1);

// 每行末尾添加\n进行换行

csvString = csvString + "\n";

}

原来内层循环的是所有数据列,现在改成传入的有效数据列数。

跨行表格

bVbbH68?w=1319&h=133

以这个图为例,第一行是有15列的,但是第二行的数据只有4列,因为其余的列是第一行设置rowspan显示的,实际上第二行的tr中只有人员资质4个td。

bVbbH8S?w=1014&h=64

这就导致导出的时候第二行只有四个数据,并且是从左对齐的,所以我们需要在跨行的列添加空数据。

加一个条件判断,传入出现被跨行的列时剩余列的长度,用于区分是正常列还是被跨行的列。

if (self.isNormalItem(rowData)) {

// 如果该列为正常列,循环内容

for (let j = 0; j < self.exportCols; j++) {

// 如果该列不存在,则赋值为空内容

var data = rowData[j] === undefined ? '' : rowData[j].innerHTML;

// 拼接内容,用逗号分隔

csvString = csvString + data + ",";

}

} else {

// 根据有效数据中的跨行列拼接空数据

for (let j = 0; j < self.multipleRowCols; j ++) {

csvString = csvString + ",";

}

// 根据有效数据减去跨行列,获得非跨行列,并拼接数据

for (let index = 0; index < self.exportCols - self.multipleRowCols; index ++) {

csvString = csvString + rowData[index].innerHTML + ",";

}

}

资格证出现空列

bVbbIa9?w=1344&h=301

因为这里需要为添加资格证按钮添加一个空列,导出的时候也会出现空列,效果并不好。

bVbbIdj?w=419&h=178

所以需要进行判断,当出现被跨行的列时,需要判断它的上一行的最后四项内容是否为空,如果为空,就应该把这个列的内容放到上一行。

if (self.isNormalItem(rowData)) {

// 如果该列为正常列,循环内容

...

} else if (self.isFirstItem(csvString)) {

// 如果当前跨行资质是当前人员的第一个资质,则将该资质添加到上一行

// 因为能添加人员资质的界面第一行的人员资质是空的,所以需要将该资

// 质添加到上一行

csvString = self.addDataToPreString(rowData, csvString);

} else {

// 根据有效数据中的跨行列拼接空数据

...

}

再加一个else,如果当前被跨行的列是当前人员的第一个人员资质的话,就把这一行的人员资质数据添加到上一行人员资质的空白处。

下面是方法的具体实现:

// 判断当前表格中资质是否是第一项资质

self.isFirstItem = function(string) {

// 分隔字符串

var csvArray = string.split(',');

// 循环已有字符数组的倒数四个元素,判断是否有效

for (var i = csvArray.length - 1; i >= csvArray.length - 4; i--) {

if (self.isValid(csvArray[i])) {

return false;

}

}

return true;

};

// 判断当前字符是否有效

// 空字符和\n视为无效

self.isValid = function(char) {

if (char === '' || char === '\n') {

return false;

} else {

return true;

}

};

// 添加数据到字符串的上一行

self.addDataToPreString = function(data, string) {

// 字符串分隔为数据

var csvArray = string.split(',');

// 循环,将有效的数据添加到上一行

for (let i = 0; i < self.validNoMultipleRowCols; i++) {

csvArray[csvArray.length - self.validNoMultipleRowCols + i] = data[i].innerHTML;

}

// 数组转换为字符串

return csvArray.join(',');

};

最终实现导出的csv效果:

bVbbIfN?w=932&h=127

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值