Bootstrap-table导出事件咨询：如何实现导出前数据后置处理及前后事件

我之前也碰到过一模一样的需求——要在导出动作执行前，先把选中的待导出数据同步到后端数据库，确认保存成功后再触发客户端导出。结合Bootstrap Table的导出扩展，有两种比较实用的实现方式，给你详细拆解下：

方法一：利用内置export-before事件拦截处理 #

Bootstrap Table的导出扩展自带了export-before.bs.table事件，会在导出动作启动前触发，刚好适合我们插入异步保存的逻辑。

具体步骤&代码示例 #

1. 确保页面已正确引入Bootstrap Table核心库、导出扩展（比如bootstrap-table-export.js）以及对应的导出依赖（如tableExport.js）。
2. 给表格绑定事件，拦截默认导出并完成数据保存+手动触发导出：

<!-- 表格结构示例 -->
<table id="exportTable" 
       data-toggle="table" 
       data-url="/api/get-table-data" 
       data-toolbar="#toolbar" 
       data-show-export="true"
       data-export-types="['excel', 'csv', 'pdf']"
       data-checkbox="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="username">用户名</th>
      <th data-field="email">邮箱</th>
    </tr>
  </thead>
</table>

$(function() {
  $('#exportTable').on('export-before.bs.table', function(e, args) {
    // 先阻止默认导出行为，因为要先执行异步保存
    e.preventDefault();

    // 获取用户选中的待导出数据
    const selectedRows = $(this).bootstrapTable('getSelections');
    
    if (selectedRows.length === 0) {
      alert('请先选择要导出的数据哦！');
      return;
    }

    // 发送AJAX到后端保存数据
    $.ajax({
      url: '/api/save-export-records',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(selectedRows),
      success: function(res) {
        if (res.code === 200) { // 假设后端返回code=200表示保存成功
          // 保存成功后，手动触发导出，沿用用户选择的导出类型
          $('#exportTable').bootstrapTable('export', {
            type: args.type,
            fileName: `导出数据_${new Date().toLocaleDateString()}`,
            ignoreColumn: args.ignoreColumn // 继承原事件的忽略列配置
          });
          alert('数据已保存并开始导出！');
        } else {
          alert('数据保存失败，请稍后重试！');
        }
      },
      error: function() {
        alert('网络异常，无法连接到服务器！');
      }
    });
  });
});

方法二：自定义导出按钮，完全掌控流程 #

如果你觉得内置事件的拦截不够灵活，也可以隐藏默认导出按钮，自己添加自定义按钮，全程把控导出前的逻辑：

代码示例 #

<!-- 自定义工具栏 -->
<div id="toolbar">
  <button id="customExcelExport" class="btn btn-primary">导出Excel</button>
  <button id="customCsvExport" class="btn btn-secondary">导出CSV</button>
</div>

<!-- 表格隐藏默认导出按钮 -->
<table id="exportTable" 
       data-toggle="table" 
       data-url="/api/get-table-data" 
       data-toolbar="#toolbar" 
       data-show-export="false"
       data-checkbox="true">
  <!-- 表头结构同上 -->
</table>

$(function() {
  // 绑定自定义Excel导出按钮事件
  $('#customExcelExport').click(function() {
    handleExport('excel');
  });

  // 绑定自定义CSV导出按钮事件
  $('#customCsvExport').click(function() {
    handleExport('csv');
  });

  // 统一处理导出逻辑
  function handleExport(exportType) {
    const selectedRows = $('#exportTable').bootstrapTable('getSelections');
    
    if (selectedRows.length === 0) {
      alert('请选择要导出的数据！');
      return;
    }

    $.ajax({
      url: '/api/save-export-records',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(selectedRows),
      success: function(res) {
        if (res.code === 200) {
          $('#exportTable').bootstrapTable('export', {
            type: exportType,
            fileName: `导出数据_${new Date().toLocaleString()}`
          });
        } else {
          alert('数据保存失败，无法执行导出！');
        }
      },
      error: function() {
        alert('保存数据出错，请检查网络连接！');
      }
    });
  }
});

一些注意事项 #

• 后端接口要确保能正确解析前端发送的JSON数据，并且返回清晰的成功/失败标识，方便前端判断是否继续导出。
• 如果需要导出全部数据而非选中数据，把getSelections()换成getData()即可。
• 不同版本的Bootstrap Table导出扩展API可能略有差异，比如部分版本用exportOptions方法配置参数，你可以根据自己使用的版本调整代码细节。
• 异步操作一定要做好错误处理，避免用户点击按钮后没有任何反馈。

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