AngularJS NG-CSV 文件未下载答案

【问题标题】：AngularJS NG-CSV files not downloadingAngularJS NG-CSV 文件未下载
【发布时间】：2014-11-22 02:31:13
【问题描述】：

我对 AngularJS 相当陌生，我正在尝试使用 ng-csv 从数组生成 .csv 文件。现在我已经尝试了一切，但没有生成文件，我什至尝试了我在互联网上看到的最简单的例子。我在错误控制台中没有看到任何错误，但仍然没有生成文件。我正在使用 XAMPP 在 Windows 下工作。

    <!DOCTYPE html>
<html ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>angular-count-to example</title>
    <style type="text/css">
        .element{cursor:pointer;float:left;background-color:#ccc;padding:4px;}
    </style>

</head>
<body ng-controller="ExampleController">
    <p>{{data}}</p>
    <button type="button" ng-csv="data" filename="test.csv">Export</button>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="bower_components/ng-csv/src/ng-csv/ng-csv.js"></script>
    <script>
        angular.module('APP',["ngSanitize","ngCsv"]).
        controller('ExampleController', function ($scope) {
            $scope.filename = "test";
            $scope.data = [{a: 1, b:2}, {a:3, b:4}];       
        });
    </script>
</body>
</html>

上面是我尝试过的最简单的例子，但是即使这样也行不通。

【问题讨论】：

标签： angularjs export-to-csv

【解决方案1】：

试用纯 HTML5 解决方案。这是我不久前做的一个代码块。通过排除无用的参数来尝试为自己定制

function (JSONData, ReportTitle, ShowLabel, reportType, reportName) {
        //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

        angular.forEach(arrData, function (data, index) {
            if (data.date != undefined)
                data.date = dateFormat(data.date)
        });


        var CSV = '';
        //Set Report title in first row or line

        CSV += ReportTitle + '\r\n\n';

        //This condition will generate the Label/Header
        if (ShowLabel) {
            var row = "";

            //This loop will extract the label from 1st index of on array
            for (var index in arrData[0]) {
                row += index + ';';
            }

            row = row.slice(0, -1);

            //append Label row with line break
            CSV += row + '\r\n';
        }

        //1st loop is to extract each row
        for (var i = 0; i < arrData.length; i++) {
            var row = "";

            //2nd loop will extract each column and convert it in string comma-seprated
            for (var index in arrData[i]) {

                //var temp = arrData[i][index].toString().replace('.', ',');
                //arrData[i][index] = temp;

                row += '"' + arrData[i][index] + '";';
            }

            row = row.split('.').join(",");
            row.slice(0, row.length - 1);

            //add a line break after each row
            CSV += row + '\r\n';
        }

        if (CSV == '') {
            alert("Invalid data");
            return;
        }

        //Generate a file name
        var fileName = "MyReport_";
        //this will remove the blank-spaces from the title and replace it with an underscore
        fileName += ReportTitle.replace(/ /g, "_");

        //Initialize file format you want csv or xls
        var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

        // Now the little tricky part.
        // you can use either>> window.open(uri);
        // but this will not work in some browsers
        // or you will not get the correct file extension

        //this trick will generate a temp <a /> tag
        var link = document.createElement("a");
        link.href = uri;

        //set the visibility hidden so it will not effect on your web-layout
        link.style = "visibility:hidden";
        link.download = fileName + ".csv";

        //this part will append the anchor tag and remove it after automatic click
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

【讨论】：

我得出的结论是，我可以在后端使用 PHP 更好地做到这一点。我有数以百万计的单词要计算，所以这对于前端来说太多了。不过谢谢你的回答。
我认为这对于前端来说并不过分。我建议你在得出结论之前先测试一下

【解决方案2】：

您似乎链接到了错误的 ng-csv.js。 bower_components/ng-csv/src/ng-csv/ 文件夹中的 ng-csv.js 文件不包含所有代码，您需要使用构建版本。试试这个：

<script type="text/javascript" src="bower_components/ng-csv/build/ng-csv.js"></script>

【讨论】：

@user2668026 运气好吗？
很抱歉最近几周很忙，所以我还没有尝试过。这个周末我会尝试并报告结果。