ng-grid导出到CSV插件-如何下载所有数据，即使页面

ng-grid export to CSV plugin -- how to download all data even if paged

本文关键字：数据 下载 CSV 插件 何下载 ng-grid      更新时间：2023-09-26

嗨，我正在使用angular的ng-grid来显示大约1000行数据。用户可以一次查看实际表中的10行、20行或100行数据，但无论他们一次查看多少数据，我都希望他们能够下载包含所有1000行的CSV文件。

是否有办法做到这一点与当前的插件?我已经挣扎了一段时间了，因为插件总是去实际的ng-grid获取数据，以便从中创建CSV。

ng-grid plug in:

ngGridCsvExportPlugin = function(opts) {
var self = this;
self.grid = null;
self.scope = null;
self.init = function(scope, grid, services) {
    self.grid = grid;
    self.scope = scope;
    function showDs() {
        var keys = [];
        for (var f in grid.config.columnDefs) { if (grid.config.columnDefs[f].field) { keys.push(grid.config.columnDefs[f].field); }}
        var csvData = '';
        function csvStringify(str) {
            if (str == null) return '';  // we want to catch anything null-ish, hence just == not ===
            if (typeof(str) === 'number') return '' + str;
            if (typeof(str) === 'boolean') return (str ? 'TRUE' : 'FALSE') ;
            if (typeof(str) === 'string') return str.replace(/"/g,'""');
            return JSON.stringify(str).replace(/"/g,'""');
        }
        function swapLastCommaForNewline(str) {
            var newStr = str.substr(0,str.length - 1);
            return newStr + "'n";
        }
        for (var k in keys) {
            csvData += '"' + csvStringify(keys[k]) + '",';
        }
        csvData = swapLastCommaForNewline(csvData);
        var gridData = grid.data;
        for (var gridRow in gridData) {
            for ( k in keys) {
                var curCellRaw;
                if (opts != null && opts.columnOverrides != null && opts.columnOverrides[keys[k]] != null) {
                  curCellRaw = opts.columnOverrides[keys[k]](gridData[gridRow][keys[k]]);
                } else {
                  curCellRaw = gridData[gridRow][keys[k]];
                }
                csvData += '"' + csvStringify(curCellRaw) + '",';
            }
            csvData = swapLastCommaForNewline(csvData);
        }
        var fp = grid.$root.find(".ngFooterPanel");
        var csvDataLinkPrevious = grid.$root.find('.ngFooterPanel .csv-data-link-span');
        if (csvDataLinkPrevious != null) {csvDataLinkPrevious.remove() ; }
        var link = "data:text/csv;charset=UTF-8," + encodeURIComponent(csvData);
        var csvDataLinkHtml = "<span class='"csv-data-link-span'">";
        csvDataLinkHtml += "<br><a class='"btn hidden btn-primary exportTable2CSV'" href=" + link + " download='"Export.csv'">CSV Export</a></br></span>" ;
        fp.append(csvDataLinkHtml);
        scope.$emit("exportTable2CSVLinkReady", link);
    }
    setTimeout(showDs, 0);
    scope.catHashKeys = function() {
        showDs();
      hash = '';
      for (idx in scope.renderedRows) { hash += scope.renderedRows[idx].$$hashKey;  }
      return hash;
    };
    scope.$watch('catHashKeys()', showDs);
};
};

你已经有了所有的数据，也许你可以使用ng-csv导出csv文件

下面是一个例子。sfiddle

html: 

<h2>Export {{sample}}</h2>
  <div>
      <button type="button" ng-csv="getArray" filename="test.csv">Export</button>
</div>
javascript: 

angular.module('csv', ['ngCsv']);
function Main($scope) {
    $scope.sample = "Sample";
    $scope.getArray = [{a: 1, b:2}, {a:3, b:4}];                            
}
    根据你的解释，不清楚什么是未定义的…您是否尝试过通过范围而不是网格访问数据?

  1. 正如您可能已经观察到的那样，没有这样的钩子/函数将一次导出所有数据，所以我建议让用户更改页面选择以仅在启用CSV导出选项之后显示所有记录?

相关文章：