Question

寻找类似于http://technoscripts.com/export-html-table/中给出的数据表的Angular UI GRID的类似示例 - PNG，Excel，PDF等，

Angular UI Grid示例，已导出为PDF和CSV

以下是Index.html的内容

<head>
  <script src="angular.min.js"></script>
  <script src="ui-grid.min.js"></script>
  <script src="csv.js"></script>
  <script src="pdfmake.js"></script>
  <script src="vfs_fonts.js"></script>
  <link rel="stylesheet" href="ui-grid.min.css" />
</head>

<body>

  <div ng-controller="MainCtrl">
    <div id="grid" ui-grid="gridOptions" ui-grid-pagination ui-grid-exporter class="grid"></div>
  </div>

  <script src="app.js"></script>
</body>

</html>

以下是app.js的内容

var app = angular.module('app', ['ui.grid', 'ui.grid.pagination', 'ui.grid.exporter']);
app.controller('MainCtrl', ['$scope', 'uiGridExporterService', 'uiGridExporterConstants', function($scope, uiGridExporterService, uiGridExporterConstants) {
                $scope.export = function(format) {
                    var exportData = [];
                    var exportColumnHeaders = $scope.gridOptions.showHeader ? uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE) : [];
                    angular.forEach($scope.gridApi.grid.rows, function(row) {
                        if (row.visible) {
                            var values = [];
                            angular.forEach(exportColumnHeaders, function(column) {
                                var value = row.entity[column.name];
                                values.push({
                                    value: value
                                });
                            });
                            exportData.push(values);
                        }
                    });
                    var content;
                    if (format == "csv") {
                        content = uiGridExporterService.formatAsCsv(exportColumnHeaders, exportData, ',');
                        uiGridExporterService.downloadFile($scope.gridOptions.exporterCsvFilename, content, $scope.gridOptions.exporterOlderExcelCompatibility);
                    } else {
                        content = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);
                        pdfMake.createPdf(content).open();
                    }
                };
                $scope.gridOptions = {
                        enableGridMenu: true,
                        exporterMenuCsv: false,
                        exporterMenuPdf: false,
                        gridMenuCustomItems: [{
                            title: 'CSV Export (Filtered & Paged Grid)',
                            action: function() {
                                $scope.export('csv');
                            },
                            order: 210
                        }, {
                            title: 'PDF Export (Filtered & Paged Grid)',
                            action: function() {
                                $scope.export('pdf');
                            },
                            order: 250
                        }],
                        enableFiltering: true,
                        paginationPageSizes: [8, 16, 24],
                        paginationPageSize: 8, //paging: false, exporterCsvFilename: 'filteredData.csv', onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; }, columnDefs: [{name: 'S.No', field: '', displayName: 'S.No', width: 80, cellTemplate: '{{rowRenderIndex+1}}'}, {name: 'Date'}, {name: 'File Name'}, {name: 'File Path'}, {name: 'Download Count'}], data: [{"Date": "01-01-1980", "File Name": "Diagram.jpeg", "File Path": "\arch\Diagram.jpeg", "Download Count": "10"}] }; } ]);

感谢。

Angular UI Grid中的类似示例

0 个答案: