除复制按钮外，HTML5 导出按钮不起作用

Posted 2023-05-07

【中文标题】除复制按钮外，HTML5 导出按钮不起作用

【英文标题】：HTML5 export buttons are not working except copy button

【发布时间】：2015-12-08 22:51:48

【问题描述】：

我在我的 jquery 数据表中使用 html5 导出按钮来导出表数据。按钮显示正确，但无法导出 pdf/excel 的数据，但复制按钮工作正常。 我的代码是：

 table = $(".jqueryDataTable").DataTable(                  
                        "searching": false,
                    "retrieve": true, 
                    "destroy": true,
                    "ajax": "./getReportDetails",
                    "jQueryUI": true,
                    "dom": 'Bfr<"H"lf><"datatable-scroll"t><"F"ip>',

                     buttons: [
                              'copyHtml5',      
                              'excelHtml5',
                              'csvHtml5',
                              'pdfHtml5' 
                          ], 
                    "fnServerParams": function ( data ) 
                        newData=data;
                        newData.push(  "name": "reportType", "value": reportType ,  "name": "reportSubType", "value": reportSubType,  "name": "fromDate", "value": fromDate,  "name": "toDate", "value": toDate);
                    ,
                    "columns": [
                                     "mData": "username", "sTitle": "username",
                                     "mData": "transferType", "sTitle": "transferType"
                        ]
                 );  

我参考了here。我已经包含了所有必需的文件。 我的数据表也显示了正确的数据。 编辑：单击 excel 按钮时，我在文件 buttons.html5.min.js 中收到 javascript 异常 Uncaught TypeError: Cannot read property 'replace' of null，单击 pdf 按钮时出现异常 Uncaught TypeError: Cannot read property 'length' of null 在pdfmake.min.js。

我的代码有什么问题？

【问题讨论】：

你能在jsFiddle上创建一个例子来演示这个问题吗？

【参考方案1】：

更新：DataTables 作者已针对 Button 扩展 v1.0.3 确认了这些问题。修复已实施，应随 v1.0.4 一起发布。

我自己也遇到过这两个错误。看来导出扩展确实希望每个值都作为字符串。

如果您的数据集中有例如数字，则会出现 Excel/CSV 按钮的问题。

我有 created a fiddle 处理该问题，并将其报告给 this forum topic 的 DataTables 项目。

$('#example').DataTable(
    dom: 'tB',
    buttons: ['csv', 'pdf'],
    columns: [
        
            title: 'Name',
            data: 'name'
        ,
        
            title: 'Age',
            type: 'num',
            data: 'age'
        
    ],
    data: [
        name: 'John Doe', age: 25,
        name: null, age: 37
    ]
);

我也遇到了 PDF 按钮的第二个问题。就我而言，这是由空值引起的，但我还没有设法在小提琴中重现。 （上面的小提琴确实包含一个空值，但它不会导致崩溃。我不知道我的实际情况有什么不同。）

@Puneet，也许您可​​以将小提琴编辑为与您的问题更相似，以重现您遇到的问题，然后将其报告给 DataTables。

我仍然希望这可能会在 DataTables 核心运行时得到解决，但在此之前，您可以应用的一种解决方法是将按钮的 exportOptions 中的 orthogonal 数据类型设置为例如export，然后定义一个单独的 export 函数作为该列的 renderer，它将其转换为字符串。