CSV transformation on client side.

app/assets/javascripts/results.jsx

@@ -105,10 +105,10 @@ var ResultsContainer = React.createClass({
                 <div id="results-paginator-options" className="results-paginator-options">
                     <div class="off result-pages-count"></div>
                     <div className="row">
-                        <div className="col-md-12">
+                        <div className="col-md-10">
                             <ul className="tabulator list-inline">
                                 <li>
-                                    <span className="total-results">50</span>
+                                    <span className="total-results">10</span>
                                     <span className="total-results-label"> Ergebnisse:</span>
                                 </li>
                                 <li>
@@ -128,6 +128,9 @@ var ResultsContainer = React.createClass({
                                 </li>
                             </ul>
                         </div>
+                        <div className="col-md-2">
+                            <CSVForm data={this.props.data}></CSVForm>
+                        </div>
                     </div>
                 </div>
                 <div className="search-results-content">
@@ -147,6 +150,93 @@ var ResultsContainer = React.createClass({
     }
 });
 
+var CSVForm = React.createClass({
+    handleClick: function(e) {
+
+        var JSONData = JSON.stringify(this.props.data["@graph"]);
+        var ReportTitle = "current results in CSV format"
+        var ShowLabel = false;
+
+        //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
+        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
+
+        var CSV = '';
+        //Set Report title in first row or line
+
+        CSV += ReportTitle + '\r\n\n';
+
+        //This condition will generate the Label/Header
+        if (ShowLabel) {
+            var row = "";
+
+            //This loop will extract the label from 1st index of on array
+            for (var index in arrData[0]) {
+
+                //Now convert each value to string and comma-seprated
+                row += index + ',';
+            }
+
+            row = row.slice(0, -1);
+
+            //append Label row with line break
+            CSV += row + '\r\n';
+        }
+
+        //1st loop is to extract each row
+        for (var i = 0; i < arrData.length; i++) {
+            var row = "";
+
+            //2nd loop will extract each column and convert it in string comma-seprated
+            for (var index in arrData[i]) {
+                row += '"' + arrData[i][index] + '",';
+            }
+
+            row.slice(0, row.length - 1);
+
+            //add a line break after each row
+            CSV += row + '\r\n';
+        }
+
+        if (CSV == '') {
+            alert("Invalid data");
+            return;
+        }
+
+        //Generate a file name
+        var fileName = "Fuhsen_";
+        //this will remove the blank-spaces from the title and replace it with an underscore
+        fileName += ReportTitle.replace(/ /g,"_");
+
+        //Initialize file format you want csv or xls
+        var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
+
+        // Now the little tricky part.
+        // you can use either>> window.open(uri);
+        // but this will not work in some browsers
+        // or you will not get the correct file extension
+
+        //this trick will generate a temp <a /> tag
+        var link = document.createElement("a");
+        link.href = uri;
+
+        //set the visibility hidden so it will not effect on your web-layout
+        link.style = "visibility:hidden";
+        link.download = fileName + ".csv";
+
+        //this part will append the anchor tag and remove it after automatic click
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    },
+    render: function() {
+        return (
+            <button onClick={this.handleClick}>
+                Export to CSV
+            </button>
+        );
+    }
+});
+
 var ResultsList = React.createClass({
     render: function () {
         var resultsNodes = this.props.data["@graph"].map(function (result) {