• 技术文章 >web前端 >js教程

    AngularJS导出Excel指令

    不言不言2018-07-09 16:06:45原创1005
    这篇文章主要介绍了关于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中只有人员资质4td

    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

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    AngularJS 文档阅读的指令scope

    以上就是AngularJS导出Excel指令的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:angular.js excel directive
    上一篇:使用angularJs ng-repeat做表格合并行效果 下一篇:AngularJS 前台分页实现
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 详解如何使用Node.js开发一个简单图片爬取功能• JavaScript中的数组知识点总结• JavaScript DOM API知识串讲• JavaScript怎么创建多个对象?详解四种方法• 聊聊怎么利用angular Material做统计表格
    1/1

    PHP中文网