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>

Answer 2

IE尚未支持download属性。它属于Html 5规范，因此它很可能在较新的IE版本中出现。

要支持IE，您需要使用一些＆＃34;变通办法＆＃34; （比如向服务器发出请求[将text/csv MIME类型用于对REST API的请求的Accept标头非常聪明]，或者可能是一些flash-plugin）

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

更新

更新2

2 个答案: