JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.3/ng-csv.js"></script>
<div ng-controller="MyController">
<button type="button" ng-csv="getCsvData(filtered)" csv-header="csvHeaders" filename="sample.csv" charset="UTF-8" add-bom="true" >CSV</button>
<input type="text" placeholder="キーワード" ng-model="keyword">
<table>
<tr>
<th>ID</th>
<th>名前</th>
</tr>
<tr ng-repeat="(i, u) in filtered = (users | filter:keyword)">
<td>{{i}}</td>
<td>{{u.name}}</td>
</tr>
</table>
</div>
JavaScript
angular.module("MyApp", ["ngCsv"]).controller("MyController", MyController);
function MyController($scope) {
$scope.users = [
{ name: "田中" },
{ name: "佐藤" },
{ name: "藤田" },
{ name: "橋本" },
{ name: "宮田" }
];
$scope.getCsvData = function (filtered) {
headers = ['name'];
csvData = [];
for (fKey in filtered) {
var d = {};
for (hKey in headers) {
var key = headers[hKey];
var v = filtered[fKey][key];
d[key] = (v != null && v.length != 0) ? v : "NULL";
}
csvData.push(d);
}
$scope.csvHeaders = headers;
return csvData;
};
}