Adding Buttons to nopCommerce tables - PDF problem

rdsdev

I am using nopcommerce 4.3 and I am trying to add the default datatables Buttons to have PDF, Copy, Print, Excel available.

I think I have added the required CSS/JS files.
Copy, Print buttons works OK on the tables.
PDF button appears but when I click it it just spins. I see I am getting a javascript error.

These are the files I'm including:

  Html.AppendCssFileParts($"~/lib/datatables/buttons.bootstrap.min.css");
    Html.AppendCssFileParts($"https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css");
    Html.AppendCssFileParts($"~/lib/datatables/datatables.min.css");
    Html.AppendCssFileParts($"~/lib/datatables/css/dataTables.bootstrap.css");
    Html.AppendCssFileParts($"https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css");
    Html.AppendCssFileParts($"~/lib/kendo/{kendoVersion}/styles/web/kendo.rtl.min.css");
    Html.AppendCssFileParts($"~/lib/kendo/{kendoVersion}/styles/web/kendo.default.min.css");
    Html.AppendCssFileParts($"~/lib/kendo/{kendoVersion}/styles/web/kendo.common.min.css");
    Html.AppendCssFileParts($"~/lib/jquery-ui/jquery-ui-{jQueryUI}/jquery-ui-themes/smoothness/jquery-ui-{jQueryUI}.custom.min.css");
    Html.AppendCssFileParts("~/lib/fontAwesome/css/font-awesome.min.css");
    Html.AppendCssFileParts("~/lib/typeahead/typeahead.css");
    Html.AppendCssFileParts("~/lib/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css");
    //AdminLTE Skins (choose a skin from the css/skins)
    Html.AppendCssFileParts("~/lib/adminLTE/css/skins/_all-skins.min.css");

    //scripts
    Html.AppendScriptParts($"https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js");
    Html.AppendScriptParts($"https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js");
    Html.AppendScriptParts($"https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.js");
    Html.AppendScriptParts($"https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js");
    Html.AppendScriptParts($"https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js");

    Html.AppendScriptParts($"~/lib/datatables/buttons.bootstrap.min.js");
    Html.AppendScriptParts($"https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js");
    Html.AppendScriptParts($"~/lib/datatables/moment-with-locales-2.22.2.min.js");
    Html.AppendScriptParts($"~/lib/datatables/datatables.min.js");
    Html.AppendScriptParts($"~/lib/datatables/js/dataTables.bootstrap.min.js");
    Html.AppendScriptParts($"https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js");
    Html.AppendScriptParts($"~/lib/kendo/{kendoVersion}/js/cultures/kendo.culture.{currentKendoCulture}.min.js");
    Html.AppendScriptParts($"~/lib/kendo/{kendoVersion}/js/messages/kendo.messages.{currentKendoCulture}.min.js");
    Html.AppendScriptParts($"~/lib/kendo/{kendoVersion}/js/kendo.ui.core.min.js");

    Html.AppendScriptParts("~/js/admin.search.js");
    Html.AppendScriptParts("~/js/admin.navigation.js");
    Html.AppendScriptParts("~/js/admin.common.js");
    Html.AppendScriptParts("~/lib/typeahead/typeahead.bundle.min.js");
    Html.AppendScriptParts("~/lib/jquery-migrate/jquery-migrate-3.1.0.min.js");
    Html.AppendScriptParts($"~/lib/jquery-ui/jquery-ui-{jQueryUI}/jquery-ui-{jQueryUI}.custom.min.js");

Is there something obvious missing here ?

The Js error I see is: buttons.html5.min.js:35:251

**Uncaught TypeError: (intermediate value).createPdf is not a function**
    action https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js:35
    g https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js:14
    k https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js:15
    jQuery 2
    action https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js:35
    g https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js:14
    k https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js:15
    jQuery 2

I've tried to play with the order of the datatables JS includes, and doing so sometimes creates different errors.

colin

If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table. Note also that the ordering is important due to dependencies,

Colin