Angular ui-网格外部导出按钮

Question

我是 Angular UI-GRID 的新手，我需要为 PDF 导出 和 CSV 导出 相似to this image。你知道我该怎么做吗？

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

谢谢，埃内斯托

Answer 1

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

Answer 2

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

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

<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);
};

希望对您有所帮助！

Answer 3

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

Angular ui-网格外部导出按钮

Angular ui-grid external export buttons

angularjs

export-to-csv

angular-ui-grid

export-to-pdf