如何打印Angular UI-Grid整个数据? [英] How to print Angular UI-Grid entire data?
问题描述
这是我的代码
<!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"> </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打印总网格数据.所以请有人帮我解决这个问题，因为我是这项技术的新手
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 :
如果您参考如何使用ui-grid进行打印，则ui-grid网站会在
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.
提示2
如果要在自定义菜单项中管理导出到Pdf，则必须定义以下内容:
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
}
}
注意:您必须在角度控制器上包括对此的引用:uiGridExporterService，uiGridExporterConstants
Note: You have to include reference to this at your angular controller: uiGridExporterService, uiGridExporterConstants
提示3
如果您在打印500行以上时遇到问题，则ui-grid组件使用的pdfmake.js库中存在一个错误.为此，您在github上有一个解决方法.您可以在 github问题上获得更多信息.
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.
这篇关于如何打印Angular UI-Grid整个数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
