AngularJS导出Excel指令

来源：懂视网责编：小采时间：2020-11-27 19:33:55

AngularJS导出Excel指令

AngularJS导出Excel指令:这篇文章主要介绍了关于AngularJS导出Excel指令，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下Excel导出思路参考文章 - angularjs使用指令实现table导出csv项目中使用到了导出Excel功能，潘老师已经在博客中将表格导出为csv的技术难点实

推荐度：

点击下载本文 文档为doc格式

导读AngularJS导出Excel指令:这篇文章主要介绍了关于AngularJS导出Excel指令，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下Excel导出思路参考文章 - angularjs使用指令实现table导出csv项目中使用到了导出Excel功能，潘老师已经在博客中将表格导出为csv的技术难点实

这篇文章主要介绍了关于AngularJS导出Excel指令，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

`Excel`导出思路

参考文章 - angularjs使用指令实现table导出csv

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

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

功能按钮不导出

735522559-5b124e0faa2be_articlex[1].png

因为原指令默认导出表格所有的内容，第一次直接导出时，发现直接将查看、编辑这几个按钮的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";
}

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

跨行表格

3727967877-5b1250e16c527_articlex[1].png

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

1868072425-5b12530041bbf_articlex[1].png

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

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

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 + ",";
 }
}

资格证出现空列

747691150-5b125672e6cac_articlex[1].png

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

2679883153-5b1258f8bacad_articlex[1].png

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

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效果：

2341140852-5b125d6ebff00_articlex[1].png