Angularjs -- （指令）js表格數據導出.csv

主要代碼

$scope.PrintTableToExcel = function (id){
    var $trs = $("#"+id).find("tr"),
        str = "";
    for (var i = 0; i < $trs.length; i++) {
        var $tds = $trs.eq(i).find("td,th");
        for (var j = 1; j < $tds.length-1; j++) {
            str += $tds.eq(j).text().trim() + ",";
        }
        str += "\n";
    };
    var blob = new Blob([str], {type: "text/plain;charset=utf-8"});
    //解決中文亂碼問題
    blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
    var object_url = window.URL.createObjectURL(blob);

    var link = document.createElement("a");
    link.href = object_url;
    link.download =  "導出.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

angularjs--封裝指令

<ng-table-csv for="mailTable" options="[0,11]" title="郵件記錄"></ng-table-csv>
//for：必須，綁定下載table的id。    options：非必須，指定不可下載列，默認全部可下載。    title：非必須，下載文件的命名。
<table id="mailTable"></table>

AppDirectives.directive('ngTableCsv', ['$document', function () {
    return {
        restrict: 'EA',
        multiElement: true,
        template: '<button class="ui button mini icon basic teal"><i class="icon file excel outline"></i></button>',
        scope: {
            for: "@",
            options: "<",
            name: "@"
        },
        link: function (scope, element) {
            var id = scope.for || '';
            if(id){
                var getHmtl = function () {
                    var i = 0,
                        title = $("#"+id).find("tr").eq(0).find("td,th"),
                        html = '<div class="self_scroll popContent csv">';
                    scope.options = scope.options || [];
                    for (; i < title.length; i++) {
                        if(scope.options.indexOf(i) == -1){
                            let text = title[i].innerText;
                            if(text){
                                html += '<div class="ui checkbox" style="width: 100%;" title="' + text + '">' +
                                    '<input i="' + i + '" type="checkbox" tabindex="0" class="hidden" checked/>' +
                                    '<label>' + text + '</label>' +
                                    '</div>';
                            };
                        };
                    };
                    html += '<button class="ui button teal" id="toCsv" style="width: 100%;padding: 7px 10px;margin: 0;">CSV</button></div>';
                    return html;
                };
                var option = {
                    className: {
                        popup: "ui popup colPop"
                    },
                    position: "right center",
                    on: "click",
                    html: getHmtl(),
                    onCreate: function ($module, popup) {
                        $(this).html(getHmtl());
                        $(".colPop .ui.checkbox").checkbox();
                        //導出
                        $("#toCsv").click(function (){
                            var $this = $('.popContent.csv>.checkbox'),
                                $trs = $("#"+id).find("tr"),
                                checked = $this.find("input:checked"),
                                index = [],
                                str = "";
                            angular.forEach(checked, function (d) {
                                index.push($(d).attr('i'));
                            });
                            for (var i = 0; i < $trs.length; i++) {
                                var $tds = $trs.eq(i).find("td,th");
                                for (var j = 0; j < $tds.length; j++) {
                                    if(index.indexOf(j) != -1){
                                        let text = $tds.eq(j).text().trim();
                                        //csv格式如果有逗號，整體用雙引號括起來；如果裏面還有雙引號就替換成兩個雙引號
                                        if(text.indexOf(",") != -1 || text.indexOf("\n") != -1){
                                            text = text.replace(/\"/g, '\"\"');
                                            text = "\""+text+"\"";
                                        };
                                        str += text;
                                        if(indexlast > j) str += ",";
                                    };
                                }
                                str += "\n";
                            };
                            var blob = new Blob([str], {type: "text/plain;charset=utf-8"});
                            //解決中文亂碼問題
                            blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
                            var object_url = window.URL.createObjectURL(blob);
                            var link = document.createElement("a");
                            link.href = object_url;
                            link.download = (scope.name || "表格數據")+".csv";
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        });
                    }
                };
                element.popup(option);
            };
        }
    }
}]);

2020-04-27

今天發現問題：如果table中內容包含逗號/換行時，下載csv打開後樣式全部錯亂。

解決方法如下：

//csv格式如果有逗號，整體用雙引號括起來；如果裏面還有雙引號就替換成兩個雙引號
if(text.indexOf(",") != -1 || text.indexOf("\n") != -1){
    text = text.replace(/\"/g, '\"\"');
    text = "\""+text+"\"";
};