Home » excel » jquery – NPM Datatable Excel button not showing

jquery – NPM Datatable Excel button not showing

Posted by: admin March 9, 2020 Leave a comment

Questions:

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!

How to&Answers:

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;