UI-GRID服务端分页场景下，如何触发导出全部数据为CSV的事件？

嘿，我之前刚好碰到过UI-GRID服务端分页下要导出全量CSV的需求，给你几个靠谱的实现方案：

方案一：自定义导出按钮，手动触发全量数据获取 #

UI-GRID本身没有内置的“导出全部数据”触发事件，但我们可以自己实现一个按钮，绑定点击事件来完成全量数据的获取和导出：

1. 先在页面上添加自定义导出按钮：

<button class="btn btn-primary" ng-click="exportAllToCsv()">导出全部数据为CSV</button>

2. 在控制器里实现exportAllToCsv方法，注意要带上用户当前的筛选/排序参数，同时去掉分页限制：

$scope.exportAllToCsv = function() {
  // 构造全量数据请求参数：保留当前的筛选、排序条件，移除分页限制
  const fullExportParams = {
    ...paginationOptions,
    pageNumber: 1,
    pageSize: 999999 // 或者跟后端约定一个标识，比如isFullExport: true
  };

  // 调用服务获取全量数据
  CommonService.getStudents("../login/loadValues", fullExportParams)
    .then(function(responseData) {
      // 处理返回数据：如果你的接口返回的数组包含count字段（比如data[0].count），要提取实际数据列表
      const exportData = responseData.filter(item => !item.count); // 或者根据实际结构调整

      // 使用UI-GRID的csvExport工具生成CSV内容
      const csvContent = uiGridExporter.csvExport(
        $scope.gridApi,
        'all',
        'all'
      );

      // 触发浏览器下载
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const downloadLink = document.createElement('a');
      downloadLink.href = URL.createObjectURL(blob);
      downloadLink.setAttribute('download', `students_${new Date().toISOString().slice(0,10)}.csv`);
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    })
    .catch(err => {
      console.error('获取全量数据失败:', err);
      // 这里可以添加用户友好的错误提示，比如alert('导出失败，请稍后重试')
    });
};

方案二：扩展UI-GRID自带的导出菜单 #

如果你想复用UI-GRID的导出菜单，可以在菜单里添加一个“导出全部数据”的自定义选项，触发同样的全量导出逻辑：

$scope.gridOptions = {
  // 你的其他grid配置...
  exporterMenuPdf: false, // 不需要PDF导出可以关闭
  exporterMenuCustomItems: [
    {
      title: '导出全部数据为CSV',
      action: function() {
        $scope.exportAllToCsv(); // 调用方案一里的导出方法
      }
    }
  ]
};

重要注意事项 #

• 大数据量优化：如果数据量特别大（比如上万条），前端生成CSV可能会卡顿，建议后端直接生成CSV文件，返回下载链接，前端跳转链接下载，这样更高效。
• 保留筛选条件：一定要带上用户当前的筛选、排序参数，确保导出的是用户当前视图下的全量数据，而不是所有原始数据。
• 后端适配：和后端开发同学约定好全量数据的请求方式，比如用pageSize: 0或者专门的isExport参数来标识这是导出请求，避免分页限制。

内容的提问来源于stack exchange，提问作者Kishor Velayutham