Question

我正在使用Angular UI-GRID，我需要为导出功能创建外部按钮，例如 PDF导出和 CSV导出类似to this image 。你知道我该怎么办？

此外，我需要一个“打印”按钮，但我在文档中看不到它。此网格是否有打印行为？

谢谢你，埃内斯托

Answer 1

看看ui-grid.exporter source code（这将专门解决pdf导出，从第972行开始，但你也可以将其应用到csv用例），你需要创建一个外部按钮在您的HTML中，然后通过uiGridExporterService将pdfExport()的{{1}}功能绑定到按钮。根据代码，ng-click函数有三个参数：grid，rowTypes和colTypes。要获取网格对象，请使用pdfExport，后两个需要设置为常量 - $scope.gridApi.grid，uiGridExporterConstants.ALL或uiGridExporterConstants.SELECTED - 具体取决于您想要的内容出口。确保在模块中注入uiGridExporterConstants.VISIBLE和uiGridExporterService。

查看this plunker我改编自ui-grid文档。相关位：

uiGridExporterConstants

希望有所帮助！

Answer 2

确保将enableGridMenu设置为false。

并在GridOptions内部执行以下操作：

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

            },

然后你需要使用像这样的export csv或exportpdf函数。

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()" />

Answer 3

它在206部分导出文档先生的数据，按钮导出位于右上角，当然您可以自定义按钮。但你的主要问题不在于它。
据我所知，它还没有添加到ui-grid功能，但是如果你想要潜入，它是可能的，如果你转换为pdf或csv那里有打印按钮（右上）。如果您真的想在页面this上找到它，可能对您有帮助。

Angular ui-grid外部导出按钮

3 个答案: