如何打印Angular UI-Grid的全部數據？

這是我的代碼如何打印Angular UI-Grid的全部數據？

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

在上面的代碼我有500個數據，以顯示與尋呼，但是，當用戶點擊打印按鈕通過使用angularjs打印總網格數據。所以請能有人幫我解決這個問題，因爲我是新來這個技術

來源

2015-09-10 durga siva kishore mopuru

你能否讓你的問題清楚些？您是否想要將完整的表格行導出爲pdf或詢問如何僅將特定頁面中的行導出爲pdf？ – SaiGiridhar

不，我只是想給整個網格打印在A4大小的文件，並prevoius PDF問題已解決。 –

您需要以https://dzone.com/articles/building-simple-angularjs類似的方式實施自定義指令 – SaiGiridhar

提示1：

如果您在如何與UI網打印是指，在UI網網站表示，幫助在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。

來源

2016-05-05 18:55:33 Aquiles

如何打印Angular UI-Grid的全部數據？

回答

相關問題