在 Angular UI 网格中导出到 CSV 时更改文件名

Question

我们在项目中使用 Angular UI 网格。我需要将当前日期放在带有导出的 CSV 数据的文件名中。我现在在点击 "export" 按钮时所做的事情：

$scope.exportCSV = function () {
     $scope.gridOptions.exporterCsvFilename = getDate() + ".csv";
     $scope.gridApi.exporter.csvExport("all", "visible");
};

问题是文件名只配置了一次，下次点击时不会改变。如何重新设置文件名？

Answer 1

为了动态更改文件名，您需要注入 uiGridExporterService 服务，然后您可以调用 downloadFile 接受文件名的函数第一个参数。

示例：

var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);

app.controller('MainCtrl', ['$scope','uiGridExporterConstants','uiGridExporterService', function ($scope,uiGridExporterConstants,uiGridExporterService) {

  $scope.exportCSV = function(){
     var exportService=uiGridExporterService;
     var grid=$scope.gridApi.grid;
     var fileName=getDate() + ".csv";

     exportService.loadAllDataIfNeeded(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE).then(function() {
     var exportColumnHeaders = exportService.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
     var exportData = exportService.getData(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE);
     var csvContent = exportService.formatAsCsv(exportColumnHeaders, exportData, grid.options.exporterCsvColumnSeparator);
         exportService.downloadFile(fileName, csvContent, grid.options.exporterOlderExcelCompatibility);
  });

}
}]);

实例：http://plnkr.co/edit/O44fbDiCe6Pb5vNYRVSU?p=preview

Answer 2

如果我没有将它包含在 onRegisterApi() 之前的初始 gridOptions 中，我能够修改导出文件名。

    $scope.gridOptions = {
        // exporterCsvFilename: 'Do not set here',
        exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        columnDefs: [
            { field: 'Category' },
            { field: 'Description' },
            { field: 'RateCode' }
        ],
    };

之后我可以像这样用 javascript 设置它：

    $scope.gridOptions.exporterCsvFilename = 'Custom_' + $scope.selectedVersion.VersionNumber + '_2017-06-29.csv';

Answer 3

另一种解决方案是在设置文件名后使用 gridApi.core.notifyDataChange 告诉网格选项数据已更新。这样我们就可以使用 csvExport() 等，而不是像接受的答案那样再次重写整个函数。

她是 excel 和 csv:

的修改导出菜单的示例

angular.module('app').controller('GridCrtl', ['$scope', '$filter', 'uiGridExporterService', 'uiGridExporterConstants', function ($scope, $filter, uiGridExporterService, uiGridExporterConstants) {

    $scope.grid = {
        exporterMenuExcel: false
        , exporterMenuCsv: false
        , exporterExcelSheetName: 'Export'
        , onRegisterApi: function(gridApiRef) {
                gridApi = gridApiRef;
        }
        , gridMenuCustomItems: [{
            {
                title: 'CSV Export (visible)'
                , action: function() {
                    $scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".csv"
                    gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
                    uiGridExporterService.csvExport(gridApi.grid, uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE);
                }
                , order: 1
            }
            ,{
                title: 'CSV Export (all)'
                , action: function() {
                    $scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".csv"
                    gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
                    uiGridExporterService.csvExport(gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL);
    
                }
                , order: 2
            }
            ,{
                title: 'Excel Export (visible)'
                , action: function() {
                    $scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".xlsx"
                    gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
                    uiGridExporterService.excelExport(gridApi.grid, uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE);
    
                }
                , order: 3
            }
            ,{
                title: 'Excel Export (all)'
                , action: function() {
                    $scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".xlsx"
                    gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
                    uiGridExporterService.excelExport(gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL);
                }
                , order: 4
            }]
        }
    };

}]);

在 Angular UI 网格中导出到 CSV 时更改文件名

Change file name when exporting to CSV in Angular UI Grid

angularjs

angular-ui-grid