Question

这是我的代码

＆＃13;

<!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>

＆＃13;

＆＃13; 在上面的代码中我有500行数据来显示分页，但是当用户点击打印按钮时，使用angularjs打印总网格数据。所以请有人帮我解决这个问题，因为我是这项技术的新手

Answer 1

提示1 ：

如果您参考如何使用ui-grid打印，ui-grid网站会在Exporting Data显示帮助，您可以从网格菜单中导出数据。

提示2

如果要在自定义菜单项中管理导出到Pdf，则必须定义如下内容：

$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
        }
}

注意：您必须在角度控制器中包含对此的引用：uiGridExporterService，uiGridExporterConstants

提示3

如果您在打印超过500行时遇到任何问题，则ui-grid组件会使用pdfmake.js库中的错误。为此，您在github上有一个workaround。您有github issue的额外信息。

如何打印Angular UI-Grid整个数据？

1 个答案: