How to print Angular UI-Grid entire data?

问题

This is my code

<!DOCTYPE html>
<html class="no-js" ng-app="test"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title></title>
    <meta content="width=device-width" name="viewport">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
   

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js"></script>
    <style>
        body {
            padding: 60px;
            min-height: 600px;
        }
        .grid {
            width: 900px;
            height: 400px;
        }
        .placeholder {
            height: 50%;
            width: 50%;
            border: 3px solid black;
            background: #ccc;
        }
    </style>
</head>
<body ng-controller="Main">
    
<h2>Grid</h2>
    <button ng-click="export()">Export to Csv</button>
    <button ng-click="exportPdf()">Export to Pdf</button>

    <div class="custom-csv-link-location">
        <br />
        
        <span class="ui-grid-exporter-csv-link">&nbsp</span>
    </div>
    <br />
    <div>
        <div ui-grid="gridOptions" ui-grid-pagination ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-move-columns class="grid"></div>
    </div>
    <button  ng-click="print()">Print</button>
<!-- <div class="placeholder"> -->
<!-- </div> -->

<br>
<br>

<script>
    var app = angular.module('test', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns']);
    app.controller('Main', function ($scope, $http, $filter, uiGridConstants) {
        $scope.filteredData = [];
        $scope.gridOptions = {};
        

        $scope.gridOptions = {
            paginationPageSizes: [10, 15, 20],
            paginationPageSize: 10,
           
            columnDefs: [
            { name: 'id', enableColumnMenu: false },
            { name: 'name',  pinnedLeft: true, enableColumnMenu: false },
            { name: 'age',  pinnedRight: true, enableColumnMenu: false },
            { name: 'company',  enableColumnMenu: false },
            { name: 'email',  enableColumnMenu: false },
            { name: 'phone', enableColumnMenu: false },
            //{ name: 'about', width: 200, enableColumnMenu: false }
            ],
            exporterPdfDefaultStyle: { fontSize: 9 },
            exporterPdfTableStyle: { margin: [10, 10, 10] },
            exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
            exporterPdfOrientation: 'portrait',
            exporterPdfPageSize: 'A3',
            //exporterPdfMaxGridWidth: 1000,
            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
            }
        };
    
       

            $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
                    .success(function (data) {
                        $scope.gridOptions.data = data;
                       
                    });
            $scope.export = function () {
                var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                $scope.gridApi.exporter.csvExport('all', 'all', myElement);

            };
            $scope.exportPdf = function () {
                var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                $scope.gridApi.exporter.pdfExport('all', 'all', myElement);

            };
    });
</script>
</body>
</html>

In the above code i have 500 rows data to display with paging , but when user click print button printing total grid data by using angularjs. so please could somebody help me to resolve this,because i am new to this technology

回答1:

Hint 1:

If you refer in how to print with ui-grid, the ui-grid website indicates help at Exporting Data, where you can export your data from the grid menu.

Hint 2

If you want to manage exporting to Pdf in a custom menu item, you have to define something like this:

$scope.gridOptions = {
    gridMenuCustomItems = [ 
       {
            title: 'Exporting as PDF',
            action: function ($event) {

                var exportColumnHeaders = uiGridExporterService.getColumnHeaders(this.grid, uiGridExporterConstants.ALL);
                var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
                var docDefinition = uiGridExporterService.prepareAsPdf(this.grid, exportColumnHeaders, exportData);

                if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
                  uiGridExporterService.downloadPDF(this.grid.options.exporterPdfFilename, docDefinition);
                } else {
                  pdfMake.createPdf(docDefinition).download();
                } 
            },
            order: 2
        }
}

Note: You have to include reference to this at your angular controller: uiGridExporterService, uiGridExporterConstants

Hint 3

If you have any trouble printing more than 500 rows, there is a bug in the pdfmake.js library that is used by the ui-grid component. For this, you have a workaround at github. You have extra info at this github issue.

来源：https://stackoverflow.com/questions/32491801/how-to-print-angular-ui-grid-entire-data

标签

angularjs

angular-ui-grid