DataTables 1.13 ES6 buttons plugin jszip and pdfmake integration

DataTables 1.13 ES6 buttons plugin jszip and pdfmake integration

SchonhoffSchonhoff Posts: 12Questions: 1Answers: 0
edited November 2022 in Free community support

Hello,

after updating the DataTables packages yesterday, I encountered some problems. I changed my import from

import JSZip from 'jszip';
import ButtonHtml5 from 'datatables.net-buttons/js/buttons.html5';
window.JSZip = JSZip;
ButtonHtml5(window, $);

to

import JSZip from 'jszip';
import 'datatables.net-buttons';
window.JSZip = JSZip;

I found the new implementation in your git repository https://github.com/DataTables/Dist-DataTables-Buttons. But my app still throws this error:

buttons.html5.mjs:18 Uncaught ReferenceError: jszip is not defined
    at _jsZip (buttons.html5.mjs:18:2)
    at Object.available (buttons.html5.mjs:976:45)
    at Buttons.excel (dataTables.buttons.mjs:1875:55)
    at toConfObject (dataTables.buttons.mjs:1066:18)
    at Buttons._resolveExtends (dataTables.buttons.mjs:1101:19)
    at Buttons._expandButton (dataTables.buttons.mjs:587:20)
    at Buttons._expandButton (dataTables.buttons.mjs:646:10)
    at Buttons.add (dataTables.buttons.mjs:178:8)
    at Buttons._constructor (dataTables.buttons.mjs:493:9)
    at new Buttons (dataTables.buttons.mjs:101:7)

Is there a way to include jszip or pdfmake back to buttons again?

Also will there be a new documentation how to implement DataTables into an ES6 project?

I'm currently working with vite and with the following DataTables packages:

"datatables.net": "1.13.0",
"datatables.net-buttons": "2.3.1",
"datatables.net-responsive": "2.4.0",
"datatables.net-select": "1.5.0",
"jszip": "3.10.1",
"pdfmake": "0.2.6",

Maybe someone can give me some hint how to implement it with DataTables 1.13 . Thanks and have a nice day/night.

This question has accepted answers - jump to:

Answers

  • SchonhoffSchonhoff Posts: 12Questions: 1Answers: 0

    Some additional information:

    1.) I only want to include the excel export option on one site (it is an extra .js file) and on another side I want to include the excel/pdf export option.
    2.) DataTables will load if I changed the position of the JSZip import like this

    import JSZip from 'jszip';
    window.JSZip = JSZip;
    
    import 'datatables.net-buttons';
    import './datatables-without-export';
    

    But on my app the button won`t show up. The buttons are defined like this:

    buttons: [
    {
      extend: 'excel',
      text: 'Download current page',
      filename: 'Order overview',
      exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,],
          rows: ':visible',
       }
    },
    [...other buttons...]
    ]
    

    There is no error on the console nor a error on the DataTables debug plugin (I can't open Version check there because of our cors policy).

    For our app we will go back to version 1.12.1 and wait till there are some new information where my configuration error may be.

  • allanallan Posts: 57,703Questions: 1Answers: 9,195 Site admin
    import JSZip from 'jszip';
    import DataTable from 'datatables.net';
    import 'datatables.net-buttons';
    
    DataTable.Buttons.jszip( JSZip );
    

    Should do the job.

    Buttons adds two static methods for the setting of pdfMake and JSZip for exactly this sort of thing.

    Allan

  • SchonhoffSchonhoff Posts: 12Questions: 1Answers: 0

    Hello allen,

    sadly it isn't working like expected. My datatables-all-without-pdf.js:

    import JSZip from 'jszip';
    import DataTable from 'datatables.net';
    import 'datatables.net-responsive';
    import 'datatables.net-buttons';
    import 'datatables.net-select';
    DataTable.Buttons.jszip( JSZip );
    

    still throws this error:

    Uncaught TypeError: DataTable.Buttons.jszip is not a function
        at datatables-all-without-pdf.js:6:19
    dataTables.buttons.mjs:1098 Uncaught Cannot extend unknown button type: colvis
    

    For my DataTable I need the following packages:
    1. DataTables
    2. Responsive
    3. Colvis buttons
    4. Excel export buttons
    5. Select

    Here is the content of the vite generated file:

    import __vite__cjsImport0_jszip from "/node_modules/.vite/deps/jszip.js?v=675c9b81"; const JSZip = __vite__cjsImport0_jszip.__esModule ? __vite__cjsImport0_jszip.default : __vite__cjsImport0_jszip;
    import DataTable from '/node_modules/.vite/deps/datatables__net.js?v=b9f48634';
    import '/node_modules/.vite/deps/datatables__net-responsive.js?v=0e994e3f';
    import '/node_modules/.vite/deps/datatables__net-buttons.js?v=2e5e3c2d';
    import '/node_modules/.vite/deps/datatables__net-select.js?v=b5503de8';
    DataTable.Buttons.jszip( JSZip );
    

    If you need more information, please ask. I will try to deliver them asap.

  • SchonhoffSchonhoff Posts: 12Questions: 1Answers: 0
    edited November 2022

    My DataTable code:

    I deleted some parts and changed some naming for security reasons. We did not change the DataTable code after updating to 1.13.

    $('#dt_overview').DataTable({
        ajax: {
            url: '/hello/world',
            type: 'POST',
            data: function ( d ) {
                d.months_to_show = 1;
            }
        },
        responsive: {
            details: {
                type: 'column',
                target: -2
            }
        },
        processing: true,
        serverSide: true,
        dom: 'B<"float-right"f>rt<"flex justify-between items-center px-5"ilp>',
        pageLength: 10,
        lengthMenu: [ [10, 25, 50, 100, 150], [10, 25, 50, 100, 150] ],
        orderMulti: false,
        stripeClasses: ['stripe1', 'stripe2',],
        columns: [
            {responsivePriority: 1, data: null, orderable: false, searchable: false, defaultContent: ""},
            {responsivePriority: 2, data: 'column1', orderable: true, searchable: true},
            {responsivePriority: 4, data: 'column2', orderable: true, searchable: true, width: "15%"},
            {responsivePriority: 6, data: 'column3', orderable: true, searchable: true, className: 'text-nowrap'},
            {responsivePriority: 5, data: 'column4', orderable: true, searchable: true},
            {responsivePriority: 7, data: 'column5', orderable: false, searchable: true, className: 'text-nowrap'},
            {responsivePriority: 10, data: 'column6', orderable: false, searchable: true},
            {responsivePriority: 9, data: 'column7', orderable: true, searchable: true},
            {responsivePriority: 8, data: 'column8', orderable: true, searchable: true},
            {responsivePriority: 12, data: 'column9', orderable: false, searchable: true, visible: false},
            {responsivePriority: 13, data: 'column10', orderable: false, searchable: true},
            {responsivePriority: 14, data: 'column11', orderable: false, searchable: true},
            {responsivePriority: 0, data: null, orderable: false, searchable: false, defaultContent: ""},
            {responsivePriority: 3, data: 'column12', orderable: false, searchable: false},
        ],
        columnDefs: [
            {
                className: 'select-checkbox',
                orderable: false,
                targets: 0
            },
            {
                className: 'dtr-control',
                orderable: false,
                targets: -2
            }
        ],
        select: {
            style:    'multi',
            selector: 'td:not(:last-child, :nth-child(13))',
        },
        buttons: [
            {
                extend: 'collection',
                text: 'Download as .xls',
                titleAttr: 'Download as .xls',
                className: 'lg:rounded-r-none lg:border-r-0 lg:mr-0',
                autoClose: true,
                buttons: [
                    {
                        extend: 'excel',
                        text: 'Download current page',
                        filename: 'Overview',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                            rows: ':visible',
                        }
                    },
                    {
                        extend: 'excel',
                        text: 'Download currently selected objects',
                        filename: 'Overview',
                        enabled: false,
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                        }
                    },
                ]
            },
            {
                extend: 'colvis',
                className: 'lg:rounded-l-none lg:border-l-0 lg:ml-0',
                columns: [1,2,3,4,5,6,7,8,9],
            },
        ]
    });
    
  • allanallan Posts: 57,703Questions: 1Answers: 9,195 Site admin
    Answer ✓

    Hi,

    I've just released Buttons 2.3.2 to npm which should address the issue you are seeing. Here is an example showing Excel and PDF export

    import JSZip from 'jszip';
    import pdfMake from 'pdfmake';
    import pdfFonts from 'pdfmake/build/vfs_fonts';
    import DataTable from 'datatables.net-bs5';
    import 'datatables.net-buttons-bs5';
    import 'datatables.net-buttons/js/buttons.html5';
    
    DataTable.Buttons.jszip(JSZip);
    DataTable.Buttons.pdfMake(pdfMake);
    
    pdfMake.vfs = pdfFonts.pdfMake.vfs;
    
    new DataTable('#example', {
        dom: 'Bftip',
        buttons: [
            'excel',
            'pdf'
        ]
    });
    

    Allan

  • SchonhoffSchonhoff Posts: 12Questions: 1Answers: 0

    Hey allen,

    thanks for the update! It is working like expected. Thanks for the fast replies and the help!

    Maybe a blog post with an updated ES6 integration manual would be helpful for other users.

    Have a nice day/night!

  • allanallan Posts: 57,703Questions: 1Answers: 9,195 Site admin
    Answer ✓

    Yes, blog post and a few documentation updates are coming :)

    Allan

Sign In or Register to comment.