Angular.js从json数据生成csv文件

Question

我试图使用Angular.js从json数据生成一个csv文件.

当我从服务器获取数据时,用户在表中看到它并且可以对数据使用各种过滤器.当用户根据需要过滤它时,我希望他们能够创建csv报告.

而不是将过滤器发送回服务器以生成文件.我想直接从Angular中的过滤数据中完成.

现在,我有这个:

$scope.getReport = ->
      filteredItems = $filter('filter')($scope.records, $scope.query)
      filteredItems = $filter('orderBy')(filteredItems, $scope.tableSort.getOrderProp())

      csvRows = []
      csvRows.push('Title,Assigned ID,Last Name,First Name,Start Date,Complete Date,Page,Test Progress,Certificate')

      csvRows.push("#{record.course.title},#{record.course.assigned_id},#{record.user.last},#{record.user.first},#{record.start_date},#{record.complete_date},#{record.page},#{record.test_progress},#{record.get_cert}") for record in filteredItems
      csvString = csvRows.join("\r\n");

      report = document.createElement('a')
      angular.element(report)
        .attr('href', 'data:application/csv;charset=utf-8,' + encodeURI csvString)
        .attr('download', 'report.csv')
      console.log(report)
      document.body.appendChild(report);
      report.click();

这有点乱,但它似乎适用于Firefox和Chrome.我需要一些可以在IE9 +中运行的东西.

我想的另一种选择,但我无法弄清楚如何使用表单并将json数据发送到服务器.然后,我可以让服务器使用CSV文件进行响应.我的问题是我不知道如何在不使用Ajax的情况下将json数据传送到服务器,而Ajax不会下载返回的文件.

更新

我不认为这是最好的方法,但我使用的是两种解决方案的组合.我有javascript创建如上所述的CSV.然后,当我提交表单时,它会将'csvString'添加为隐藏表单输入的值.数据进入服务器,只响应csv文件.

更新2

再次,这种方法似乎在IE中不起作用......

Answer 1

您可以使用ngCsv模块:

用Bower安装:

bower install ng-csv

将ng-csv.min.js添加到主文件(index.html),同时确保添加angular-sanitize.min.js.

将ngCsv设置为模块中的依赖项

var myapp = angular.module('myapp', ['ngSanitize', 'ngCsv'])

将ng-csv指令添加到所需元素,例如:

<button type="button" ng-csv="getArray()" filename="test.csv">Export</button>