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

时间:2021-01-03 14:28:04

I m using HTML5 export buttons in my jquery datatable to export table data. Buttons are displaying properly but not exporting data for pdf/excel except copy button is working fine. My code is :

我在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"}
                        ]
                } );  

I took reference from here. I have included all the required files. My datatable is showing proper data as well. Edit : On the click on excel button I am getting javascript exception Uncaught TypeError: Cannot read property 'replace' of null in the file buttons.html5.min.js and on the click of pdf button I am getting exception Uncaught TypeError: Cannot read property 'length' of null in pdfmake.min.js.

我从这里参考了。我已经包含了所有必需的文件。我的数据表也显示正确的数据。编辑:点击excel按钮我得到javascript异常Uncaught TypeError:无法在文件buttons.html.min.js中读取属性'replace'的null并点击pdf按钮我得到异常Uncaught TypeError:无法读取pdfmake.min.js中属性'length'为null。

What is wrong in my code ?

我的代码有什么问题?

1 个解决方案

#1


1  

UPDATE: These issues have been confirmed by the DataTables author for the Button extension v1.0.3. Fixes have been implemented and should be released with v1.0.4.

更新:DataTables作者已针对Button扩展v1.0.3确认了这些问题。修复已经实现,应该与v1.0.4一起发布。

I've had both of these error myself. It seems that the export extension really wants every value as a string.

我自己也有这两个错误。似乎导出扩展确实希望每个值都是一个字符串。

The problem with the Excel/CSV buttons occurs if you have for example numbers in your dataset.

如果数据集中包含例如数字,则会出现Excel / CSV按钮的问题。

I have created a fiddle for that issue and reported it to the DataTables project in 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}
    ]
});

I've also had the second problem with the PDF button. In my case, this was caused by a null value, but that I haven't managed to reproduce in a fiddle yet. (The above fiddle does contain a null value yet it does not cause the crash. I don't know what's different in my real-world case.)

我还遇到了PDF按钮的第二个问题。在我的情况下,这是由一个空值引起的,但我还没有设法在一个小提琴中重现。 (上面的小提琴确实包含一个空值,但它不会导致崩溃。我不知道在我的真实案例中有什么不同。)

@Puneet, maybe you're able to edit the fiddle to be more similar to your issue to reproduce that problem you're having and then report it to DataTables.

@Puneet,也许你能够编辑小提琴,使其与您的问题更相似,以重现您遇到的问题,然后将其报告给DataTables。

I'm still hoping that this might get fixed in the DataTables core runtime, but until then, one workaround you can apply is that you set the orthogonal data type in your button's exportOptions to e.g. export, and then you define a separate export function as the renderer of that column, which converts it to a string.

我仍然希望这可以在DataTables核心运行时中修复,但在此之前,您可以应用的一种解决方法是将按钮的exportOptions中的正交数据类型设置为例如导出,然后将单独的导出函数定义为该列的渲染器,将其转换为字符串。

#1


1  

UPDATE: These issues have been confirmed by the DataTables author for the Button extension v1.0.3. Fixes have been implemented and should be released with v1.0.4.

更新:DataTables作者已针对Button扩展v1.0.3确认了这些问题。修复已经实现,应该与v1.0.4一起发布。

I've had both of these error myself. It seems that the export extension really wants every value as a string.

我自己也有这两个错误。似乎导出扩展确实希望每个值都是一个字符串。

The problem with the Excel/CSV buttons occurs if you have for example numbers in your dataset.

如果数据集中包含例如数字,则会出现Excel / CSV按钮的问题。

I have created a fiddle for that issue and reported it to the DataTables project in 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}
    ]
});

I've also had the second problem with the PDF button. In my case, this was caused by a null value, but that I haven't managed to reproduce in a fiddle yet. (The above fiddle does contain a null value yet it does not cause the crash. I don't know what's different in my real-world case.)

我还遇到了PDF按钮的第二个问题。在我的情况下,这是由一个空值引起的,但我还没有设法在一个小提琴中重现。 (上面的小提琴确实包含一个空值,但它不会导致崩溃。我不知道在我的真实案例中有什么不同。)

@Puneet, maybe you're able to edit the fiddle to be more similar to your issue to reproduce that problem you're having and then report it to DataTables.

@Puneet,也许你能够编辑小提琴,使其与您的问题更相似,以重现您遇到的问题,然后将其报告给DataTables。

I'm still hoping that this might get fixed in the DataTables core runtime, but until then, one workaround you can apply is that you set the orthogonal data type in your button's exportOptions to e.g. export, and then you define a separate export function as the renderer of that column, which converts it to a string.

我仍然希望这可以在DataTables核心运行时中修复,但在此之前,您可以应用的一种解决方法是将按钮的exportOptions中的正交数据类型设置为例如导出,然后将单独的导出函数定义为该列的渲染器,将其转换为字符串。