Kibana自定义插件如何通过Reporting插件导出CSV格式数据

基于data plugin+Reporting plugin实现，和Dashboard原生导出逻辑对齐，分两种场景适配：

前置依赖配置 #

先在插件根目录的kibana.json中声明依赖插件：

{
  "id": "yourPluginId",
  "version": "1.0.0",
  "requiredPlugins": ["data", "reporting", "share"],
  "server": true,
  "ui": true
}

在插件入口public/plugin.ts的生命周期中拿到对应API：

• setup阶段获取reporting、share插件的注册能力
• start阶段获取data插件的搜索、格式化、导出工具方法，以及reporting的任务提交能力

方案1：前端即时导出（适合小数据集、全量数据前端加载场景） #

不需要依赖服务端Reporting能力，直接复用data plugin内置的CSV生成方法，适合10万条以内的小数据量导出：

1. 引入依赖

import { generateCsv } from '@kbn/data-plugin/public';
import { EuiButton } from '@elastic/eui';

2. 编写导出逻辑，绑定到DataGrid工具栏按钮

// 对应你DataGrid的列配置、全量行数据
const { renderColumns, tableRows } = useDataGridData();

const handleFrontendExport = () => {
  // 生成CSV内容，自动处理转义、表头
  const csvString = generateCsv(
    renderColumns.map(col => ({ id: col.id, displayName: col.displayAsText })),
    tableRows,
    { includeHeader: true, delimiter: ',', quoteValues: true }
  );
  // 触发浏览器下载
  const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = `grid-export-${Date.now()}.csv`;
  downloadLink.click();
  URL.revokeObjectURL(downloadLink.href);
};

// 按钮直接传入EuiDataGrid的toolbarAdditionalControls配置即可

方案2：Reporting服务端导出（适合大数据集、服务端分页场景，和Dashboard导出逻辑一致） #

走Kibana原生Reporting任务队列，支持异步生成、大文件导出、权限管控，和Dashboard原生导出交互完全一致：

1. 注册导出类型
   在插件setup生命周期中注册CSV导出类型：

// public/plugin.ts
setup(core, { reporting }) {
  reporting?.registerExportType(reporting.csvSearchSourceExportType);
}

2. 编写导出提交逻辑
   注意构造的查询参数必须和当前DataGrid拉取数据的查询、过滤、排序条件完全一致，保证导出数据和页面展示匹配：

const handleReportingExport = async () => {
  // 构造和当前页面状态一致的SearchSource参数
  const exportSearchParams = {
    indexPattern: currentIndexPattern,
    query: appliedQuery, // 当前Grid生效的查询语句
    filters: appliedFilters, // 当前Grid生效的过滤条件
    sort: appliedSort, // 当前Grid的排序规则
    fields: visibleColumnIds, // 当前Grid展示的字段列表
    size: exportMaxSize // 配置导出最大条数，默认支持到100万条
  };

  // 提交Reporting导出任务
  await reporting.startReportingJob('csv_searchsource', exportSearchParams);
  
  // 原生提示交互，和Dashboard保持一致
  core.notifications.toasts.addSuccess('CSV导出任务已提交，文件生成完成后将自动下载');
};

3. 将方法绑定到DataGrid工具栏的导出按钮即可，后续任务轮询、下载触发、失败重试全由Reporting插件内置逻辑处理。

适配注意事项 #

• 字段格式化可复用data.fieldFormats服务的格式化方法，保证导出的日期、数字等字段格式和页面渲染完全一致
• 前端导出方案单批次数据量建议不超过10万条，超量请使用Reporting服务端导出避免浏览器内存溢出
• 使用Reporting方案需提前确认当前用户拥有Reporting功能的对应权限，否则会触发权限拦截
• 若使用EuiDataGrid默认工具栏，可直接覆盖默认导出回调，不需要额外自定义按钮样式

内容的提问来源于stack exchange，提问作者Azhar Uddin Sheikh