Bootstrap Table导出事件失效？求导出按钮及事件解决方案

一、正确的导出事件名称 #

你监听的export-started.bs.table是错误的，Bootstrap Table导出扩展的导出开始事件正确名称为export-start.bs.table，同时还支持监听导出成功事件export-success.bs.table。

监听示例：

$('#merged').on('export-start.bs.table', function(e, args) {
  alert('导出开始了！');
  // 这里可以执行你的自定义业务逻辑
});

二、添加Excel下载按钮 #

提供两种实现方式，可根据需求选择：

方式1：启用默认导出工具栏 #

在表格初始化配置中添加toolbar选项，开启官方默认导出工具栏，会自动展示你配置的所有exportTypes对应按钮：

$('#merged').bootstrapTable({
  // 原有配置保留
  toolbar: '#toolbar', // 指定工具栏容器ID
  // 其他配置不变
});

同时在HTML中添加工具栏容器：

<div id="toolbar" class="mb-2"></div>

方式2：自定义独立Excel导出按钮 #

如果需要单独的Excel导出按钮，直接添加按钮并调用表格的exportTable方法：
HTML部分添加按钮：

<button id="export-excel" class="btn btn-primary mb-2">导出Excel</button>

JS部分绑定点击事件：

$('#export-excel').on('click', function() {
  $('#merged').bootstrapTable('exportTable', {
    type: 'excel',
    fileName: '表格数据',
    exportDataType: 'all' // 可选值：'all'/'selected'/'visible'
  });
});

完整修正代码 #

HTML部分 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.0/dist/extensions/export/bootstrap-table-export.min.js"></script>

<!-- 默认工具栏容器 -->
<div id="toolbar" class="mb-2"></div>
<!-- 自定义Excel导出按钮 -->
<button id="export-excel" class="btn btn-primary mb-2">导出Excel</button>

<div>
  <table class="table" id="merged"></table>
</div>

JS部分 #

let arrData = [
  { 'id': 0, 'name': 'Item 0', 'price': '$0' },
  { 'id': 1, 'name': 'Item 1', 'price': '$1' },
  { 'id': 2, 'name': 'Item 2', 'price': '$2' },
  { 'id': 3, 'name': 'Item 3', 'price': '$3' },
  { 'id': 4, 'name': 'Item 4', 'price': '$4' },
  { 'id': 5, 'name': 'Item 5', 'price': '$5' }
];

$('#merged').bootstrapTable({
  data: arrData,
  exportTypes: ['csv','json','excel','doc','txt','sql','xml'],
  exportDataType: 'all',
  toolbar: '#toolbar',
  columns: [
    { title: "id", align: 'center', valign: 'middle', field: "id" },
    { title: "name", align: 'center', valign: 'middle', field: "name" },
    { title: "price", align: 'center', valign: 'middle', field: "price" }
  ]
});

// 监听导出开始事件
$('#merged').on('export-start.bs.table', function(e, args) {
  alert('导出开始，当前导出类型：' + args.type);
});

// 自定义Excel按钮点击事件
$('#export-excel').on('click', function() {
  $('#merged').bootstrapTable('exportTable', {
    type: 'excel',
    fileName: '商品数据',
    exportDataType: 'all'
  });
});

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