javascript - 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 module :

使用 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>