Adding Buttons to nopCommerce tables - PDF problem

Adding Buttons to nopCommerce tables - PDF problem

rdsdevrdsdev Posts: 2Questions: 2Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

This discussion has been closed.