Angular UI-Grid 外部导出按钮

Question

我是一个新手，正在使用Angular UI-GRID，我需要创建外部按钮来实现导出功能，例如PDF导出和CSV导出，类似于这张图片。你有任何想法如何做到这一点吗？

此外，我需要一个打印按钮，但在文档中没有找到。这个表格有打印行为吗？

谢谢， Ernesto

- ermamud

Answer 1

看一下ui-grid.exporter源代码（这将特别涉及pdf导出，从大约第972行开始，但您也可以将其应用于csv用例），您需要在html中创建一个外部按钮，然后通过ng-click将uiGridExporterService的pdfExport()函数与按钮绑定。根据代码，pdfExport函数需要三个参数：grid、rowTypes和colTypes。要获取网格对象，请使用$scope.gridApi.grid，而后两个参数需要设置为常量 - uiGridExporterConstants.ALL、uiGridExporterConstants.SELECTED或uiGridExporterConstants.VISIBLE - 具体取决于您要导出什么。确保在您的模块中注入uiGridExporterService和uiGridExporterConstants。

查看我从ui-grid文档调整的这个plunker。相关内容:

<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
<button ng-click="exportPdf()">PDF</button>

$scope.exportPdf = function() {
  var grid = $scope.gridApi.grid;
  var rowTypes = uiGridExporterConstants.ALL;
  var colTypes = uiGridExporterConstants.ALL;
  uiGridExporterService.pdfExport(grid, rowTypes, colTypes);
};

希望这能帮到你！

- Bennett Adams

---

它产生了错误... 你能帮忙吗？ angular.js:13236 类型错误：无法读取未定义的属性'indexOf' 在 ui-grid.js:18179 在 Array.forEach (<anonymous>) 在 Object.getColumnHeaders (ui-grid.js:18177) 在 ui-grid.js:18471 在 processQueue (angular.js:15552) 在 angular.js:15568 在 Scope.$eval (angular.js:16820) 在 Scope.$digest (angular.js:16636) 在 Scope.$apply (angular.js:16928) 在 HTMLAnchorElement.<anonymous> (angular.js:24551) - Amrit

Answer 2

请确保将enableGridMenu设置为false。

在GridOptions中，可以像下面这样进行操作：

 'exporterCsvFilename' : 'clarification-status.csv',
            exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
            onRegisterApi: function(gridApi){
                vm.gridApi = gridApi;

            },

然后您需要像这样使用导出csv或导出pdf函数。

vm.exportCsv = function() {
            var grid = vm.gridApi.grid;
            var rowTypes = uiGridExporterConstants.ALL;
            var colTypes = uiGridExporterConstants.ALL;
            uiGridExporterService.csvExport(grid, rowTypes, colTypes);
        };

在您的HTML视图中，您需要按照下面所示调用此exportcsv()函数。

<img ng-src="public/images/excel-icon.png" ng-click="vm.exportCsv()" />

- Sidd Thota

Answer 3

1. 它在文档的206部分导出数据，导出按钮位于右上角，当然您可以自定义该按钮。但是您的主要问题不是关于此。
2. 据我所知，它尚未添加到ui-grid功能中，但如果您想深入了解，并且如果您将其转换为pdf或csv，则会有打印按钮（右上方）。如果您真的想在您的页面上使用它，this可能会对您有所帮助。

- Adi Prasetyo