相信之前我们 前端下载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>