DataTables表格外添加Excel导出按钮 引用官方JS代码不生效问题问询

常见问题原因 #

• 依赖库引入不全
  DataTables的导出按钮属于扩展功能，必须额外引入以下依赖文件，缺少任意一个都会导致按钮无法渲染：
  1. jQuery（基础依赖）
  2. DataTables 核心JS/CSS
  3. DataTables Buttons 扩展核心JS/CSS
  4. Buttons HTML5 导出模块JS
  5. JSZip 库（Excel导出必需依赖）
• 按钮类型配置错误
  目前Flash版本的导出按钮已被淘汰，默认的excel参数对应废弃的Flash导出实现，新版需要使用excelHtml5作为按钮类型。
• 样式文件缺失
  未引入Buttons扩展对应的CSS文件时，按钮可能会被渲染为透明、行内元素，无法在页面上直观看到。

修正后代码示例 #

$(document).ready(function() {
  $('#dataTable').DataTable({
    dom:
      "<'row' <'col-md-12'i>>" +
      "<'row' <'col-md-6'B>>" +
      "<'row' <'col-sm-12'tr>>" +
      "<'row' <'col-md-12'p>>",
    buttons: [
      {
        extend: 'excelHtml5',
        title: '导出数据',
        extension: '.xls' // 指定导出格式为xls
      }
    ]
  });
});

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