Merge pull request angular-ui#1578 from PaulL1/exporter_no_button

Add feature: exporter.  Provides csv and pdf exporting.  Draft only

Gruntfile.js

@@ -425,6 +425,8 @@ module.exports = function(grunt) {
           '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js',
           '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js',
           '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js',
+          'bower_components/pdfmake/build/pdfmake.js',
+          'bower_components/pdfmake/build/vfs_fonts.js'
         ],
         hiddenScripts: [
           '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js',

bower.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "google-code-prettify": "~1.0.2",
     "jquery": "~1.8.0",
-    "lodash": "~2.4.1"
+    "lodash": "~2.4.1",
+    "pdfmake": "~0.1.8"
   }
 }

misc/tutorial/306_exporting_data_complex.ngdoc

@@ -0,0 +1,96 @@
+@ngdoc overview
+@name Tutorial: 306 Exporting Data
+@description The exporter feature allows data to be exported from the grid in 
+csv or pdf format.  The exporter can export all data, visible data or selected data.
+
+To use the exporter you need to include the ui-grid-exporter directive on
+your grid.  If you want to export selected rows you must include the ui-grid-selection
+directive on your grid.  If you want to export as PDF you need to have installed pdfMake, 
+available through:
+<pre>  bower install pdfmake  </pre>
+
+The options and API for exporter can be found at {@link api/ui.grid.exporter ui.grid.exporter}.
+
+
+@example
+In this example we provide a custom UI for calling the exporter, and we tailor
+the way the returned data behaves.
+
+<example module="app">
+  <file name="app.js">
+    var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
+
+    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
+      $scope.gridOptions = {
+        columnDefs: [
+          { field: 'name' },
+          { field: 'gender', visible: false},
+          { field: 'company' }
+        ],
+        exporterButtonLabel: 'Export now',
+        exporterLinkLabel: 'get your csv here',
+        exporterSuppressButton: true,
+        exporterPdfDefaultStyle: {fontSize: 9},
+        exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
+        exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
+        exporterPdfOrientation: 'portrait',
+        exporterPdfPageSize: 'LETTER',
+        exporterPdfMaxGridWidth: 500,
+        onRegisterApi: function(gridApi){ 
+          $scope.gridApi = gridApi;
+        }
+      };
+
+      $http.get('/data/100.json')
+        .success(function(data) {
+          $scope.gridOptions.data = data;
+        });
+
+
+
+      $scope.export = function(){
+        if ($scope.export_format == 'csv') {
+          var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
+          $scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
+        } else if ($scope.export_format == 'pdf') {
+          $scope.gridApi.exporter.pdfExport( $scope.export_row_type, $scope.export_column_type );
+        };
+      };
+    }]);
+  </file>
+
+  <file name="index.html">
+    <div ng-controller="MainCtrl">
+      <label>Which columns should we export?</label>
+      <select ng-model="export_column_type"</select>
+        <option value='all'>All</option>
+        <option value='visible'>Visible</option>
+      </select>
+      <label>Which rows should we export?</label>
+      <select ng-model="export_row_type"</select>
+        <option value='all'>All</option>
+        <option value='visible'>Visible</option>
+        <option value='selected'>Selected</option>
+      </select>
+      <label>What format would you like?</label>
+      <select ng-model="export_format"</select>
+        <option value='csv'>CSV</option>
+        <option value='pdf'>PDF</option>
+      </select>
+      <button ng-click="export()">Export</button>
+      <div class="custom-csv-link-location">
+        <label>Your CSV will show below:</label>
+        <span class="ui-grid-exporter-csv-link">&nbsp</span>
+      </div>
+
+      <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
+    </div>
+  </file>
+
+  <file name="main.css">
+    .grid {
+      width: 500px;
+      height: 400px;
+    }
+  </file>
+</example>