DataTables 1.13 ES6 buttons plugin jszip and pdfmake integration

Schonhoff

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.

Schonhoff

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.

allan

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

Schonhoff

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.

Schonhoff

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],
        },
    ]
});

allan

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

Schonhoff

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!

allan

Yes, blog post and a few documentation updates are coming

Allan