angularjs ng-csv 异步下载

相信之前我们 前端下载csv的时候 都是通过后台代码 生成文件，然后发送给前台 文件路径来进行下载，下面介绍一下angular1 ng-csv下载 csv数据(这种不通过后台代码来实现的前台下载)

参考

github

https://github.com/asafdav/ng-csv

1. 下载 angular-sanitize.min.js 和 ng-csv.min.js

2. 在app中注入

var app = angular.module("app", ['ngSanitize',
    'ngCsv'
]);

3. ctrl 使用

    $scope.filename = "datafile";

    $scope.getArray = function () {

        var deferred = $q.defer();

        ljkjHttp.paramData.errorMsg = false;
        ljkjHttp.paramData.param = {
            guid: $localStorage.setting.guid,
            Id: "",
            WenTitle: "",
            State: "",
            UName: "",
            BeginTime: "",
            EndTime: "",
            PageIndex: 1,
            PageSize: $scope.listDataCount
        };
        ljkjHttp.paramData.cmd = "MsQHFrSoftWenTaskList";//cmd
        ljkjHttp.paramData.function = "MsQHFrSoftWenTask";//language
        ljkjHttp.post()
               .then(function (resData) {
                   if (resData.state == 0) {
                       var listData = angular.fromJson(resData.value);
                       var resArray = [];
                       for (var item in listData) {
                           resArray.push(
                               {
                                   Id: listData[item].Id,
                                   订单编号: listData[item].OrderNumber,
                                   文章标题: listData[item].WenTitle,
                                   订单金额: listData[item].OrderPrice,
                                   创建时间: listData[item].CreateTime,
                                   写手: listData[item].UName,
                                   状态: $scope.stateData.get(listData[item].State)
                               }
                           );
                       }
                       $q.when(resArray).then(function () {
                           deferred.resolve(resArray);
                       });
                   }
               });

        return deferred.promise;

    }

    $scope.getHeader = function () { return ['Id', '订单编号', '文章标题', '订单金额', '创建时间', '录制人', '状态'] };

4 html 中

 <div class="myadd-button" ng-csv="getArray()"
                         filename="{{ filename }}.csv"
                         csv-header="getHeader()"
                         lazy-load="true">
                        <span>导出数据</span>
                    </div>