NPM Datatable Excel button not showing

问题:

My Excel Button in datatable is now showing up. I'm using NPM to import all scripts, all others buttons works well (PDF, Copy, Print). Only Excel do not work.

Check my imports:

import 'datatables.net-bs'
import 'datatables.net-buttons-bs'
import 'datatables.net-responsive-bs'
import 'datatables.net-buttons/js/buttons.colVis.js'
import 'datatables.net-buttons/js/buttons.flash.js'
import 'jszip'
import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
import 'datatables.net-buttons/js/buttons.html5.js'
import 'datatables.net-buttons/js/buttons.print.js'

pdfMake.vfs = pdfFonts.pdfMake.vfs

My config:

let datatableConfig = {
    responsive: true,
    "dom": '<"html5buttons"B>lTfgtip',
    "buttons": [
        { extend: 'copy' },
        { extend: 'excel'}, 
        { extend: 'excelHtml5' },
        { extend: 'pdf'  },
        { extend: 'print' }
    ]
};

$('#dataTable').DataTable(datatableConfig)

If i put https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js direct in my HTML, it works. How it do not work using import? (Yes, jszip is already installed)

Thanks!

回答1:

I got the same issue with the require syntax and I had to do :

window.JSZip = require( "jszip" );

I don't know the syntax with import but maybe it's something like

import window.JSZip from 'jszip';

or

JSZip from 'jszip';

or

import JSZip from 'jszip';
window.JSZip = JSZip;

回答2:

If someone doesn't want to expose jszip, now in DataTables is possible to add that library directly to Buttons:

// import section
import $ from 'jquery;
import jszip from 'jszip';
import pdfmake from 'pdfmake';
import 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';

// add pdfmake or jszip directly to DT Buttons
$.fn.dataTable.Buttons.jszip(jszip);
$.fn.dataTable.Buttons.pdfMake(pdfmake);

Source