如何将 dataTable 导出为 Excel 格式？

Posted 2023-05-09

【中文标题】如何将 dataTable 导出为 Excel 格式？

【英文标题】：How to export dataTable as Excel format?

【发布时间】：2016-10-24 05:35:26

【问题描述】：

我使用了 tableTools 插件来导出数据表数据，我已经包含了以下插件

<script src="js/jquery-1.12.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/moment/moment.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/dataTables.tableTools.js"></script>

html 代码

<table id="result_table" class="display table table-bordered" cellspacing="0" ></table>

还有我的初始化部分，

var oTable = $('#result_table').dataTable(
            //"iDisplayLength": 50,
            //"order" : [[0,"desc"]],
            "columnDefs": [
                 "width": "16%", "targets": 1 
              ],
            "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
            "dom": 'T<"clear">lfrtip',
            "tableTools": 
                "sSwfPath": "copy_csv_xls_pdf.swf"
            
        );

我的实际结果是

如果我点击 Excel 按钮，我的另存为窗口是

它保存的 CSV 文件不是 Xls 或 Xlsx 格式，而且 CSV 按钮和 Excel 按钮都只是导出 CSV 文件格式。这是我需要导出 Excel 格式的问题。请分享您的建议或解决方案

【问题讨论】：

您是否正确搜索了它。去看看下面的链接datatables.net/extensions/buttons/examples/html5/simple.html和datatables.net/extensions/buttons/examples/initialisation/…

这种方式我已经尝试过兄弟，但现在我使用了 tableTools 插件，它也可以正常工作，例如 pdf 格式和复制按钮 csv 按钮都工作正常，但 excel 按钮不导出 xls 格式这就是问题..在你的建议链接中没有使用 tableTools 插件

你还没有添加所有的js。请同时添加以下js //cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js, //cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake。 min.js, //cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js, //cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js

包含以上插件后不会改变导出按钮的功能

@RahulSingh，只有当 OP 想要使用按钮插件而不是退休的 TableTools 时才具有相关性，我认为他也应该这样做。

【参考方案1】：

使用这种方法

oTableTools: 
  sSwfPath: "copy_csv_xls_pdf.swf",
  aButtons: [
     sExtends: "xls",
      mColumns: 'visible',
      sFileName: 'export.xls',
      sToolTip: 'Save current table as XLS'
    
  ]

重要的是sExtends: "xls" 和sFileName 以确保正确的文件名附加到下载的文件。

但是正如其他人在 cmets 中提到的那样，你真的应该考虑使用 buttons 插件，这是一个使用它的演示 -> https://jsfiddle.net/zm825k01/

【讨论】：

非常棒的先生，非常感谢.. 我有一个疑问先生 tableTools 不支持 xlsx 格式？我试过 xlsx 格式，但告诉无效文件格式

@BalakumarB，不-恐怕不是。 Tabletools xls 基本上是一个专门的 css；但是按钮插件支持.xlsx。

嗨先生，如何将自定义按钮添加到 tableTools 先生，如 Docx 文件格式，我必须尝试这个脚本

text: 'Docx', action: function (e, dt, node, config) alert( 'Button激活' );

【参考方案2】：

这就是我所做的，它对我有用。 如果对您有帮助，请告诉我。

<script src="/js/jquery-1.12.0.min.js"></script> 
<script src="/js/datatables/jquery.dataTables.min.js"></script>
<script src="/js/datatables/dataTables.bootstrap.min.js"></script>
<script src="/js/datatables/dataTables.buttons.min.js"></script>
<script src="/js/datatables/buttons.bootstrap.min.js"></script>
<script src="/js/datatables/jszip.min.js"></script>
<script src="/js/datatables/pdfmake.min.js"></script>
<script src="/js/datatables/vfs_fonts.js"></script>
<script src="/js/datatables/buttons.html5.min.js"></script>
<script src="/js/datatables/buttons.print.min.js"></script>
<script src="/js/datatables/buttons.colVis.min.js"></script>

var table = $('#example').DataTable(
                lengthChange: false,
                buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
            );
table.buttons().container().appendTo( '#example_wrapper .col-sm-6:eq(0)' );