如何打印 Angular UI-Grid 整个数据? [英] How to print Angular UI-Grid entire data?

查看：26 发布时间：2021/11/10 4:17:28 angularjs angular-ui-grid

本文介绍了如何打印 Angular UI-Grid 整个数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的代码

<html class="no-js" ng-app="test"><!--<![endif]--><头><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><风格>身体 {填充:60px；最小高度:600px；}.网格 {宽度:900px；高度:400px；}.placeholder {高度:50%；宽度:50%；边框:3px纯黑色；背景:#ccc;}</风格><body ng-controller="Main"><h2>网格</h2><button ng-click="export()">导出到 Csv</button><button ng-click="exportPdf()">导出到 Pdf</button><div class="custom-csv-link-location"><br/><span class="ui-grid-exporter-csv-link">&nbsp</span>

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

<button ng-click="print()">打印</button><br><br><脚本>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],分页页面大小:10，列定义:[{ name: 'id', enableColumnMenu: false },{ name: 'name', pinnedLeft: true, enableColumnMenu: false },{ name: 'age', pinnedRight: true, enableColumnMenu: false },{名称:'公司'，启用ColumnMenu:假}，{ name: 'email', enableColumnMenu: false },{名称:'手机'，启用ColumnMenu:假}，//{ name: 'about', width: 200, enableColumnMenu: false }],exporterPdfDefaultStyle: { fontSize: 9 },exporterPdfTableStyle: { margin: [10, 10, 10] },exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },exporterPdfOrientation: '肖像',exporterPdfPageSize: 'A3',//exporterPdfMaxGridWidth: 1000,onRegisterApi: 函数 (gridApi) {$scope.gridApi = gridApi;}};$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json').成功(功能(数据){$scope.gridOptions.data = 数据；});$scope.export = 函数 () {var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));$scope.gridApi.exporter.csvExport('all', 'all', myElement);};$scope.exportPdf = 函数 () {var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));$scope.gridApi.exporter.pdfExport('all', 'all', myElement);};});</html>

在上面的代码中，我有 500 行数据要与分页一起显示，但是当用户单击打印按钮时，会使用 angularjs 打印总网格数据.所以请有人帮我解决这个问题，因为我是这项技术的新手

解决方案

提示 1:

如果您参考如何使用 ui-grid 打印，则 ui-grid 网站会在导出数据，您可以在其中从网格菜单导出数据.

提示 2

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

$scope.gridOptions = {gridMenuCustomItems = [{title: '导出为 PDF',动作:函数($事件){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);} 别的 {pdfMake.createPdf(docDefinition).download();}},订单:2}}

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

提示 3

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

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

解决方案

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.

这篇关于如何打印 Angular UI-Grid 整个数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何打印 Angular UI-Grid 整个数据? [英] How to print Angular UI-Grid entire data?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何打印 Angular UI-Grid 整个数据? [英] How to print Angular UI-Grid entire data?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭