html5 export buttons doesn't work when loading with importmap

PTChamp

Hi guys,

Im facing a issue when i want to load HTML5 export buttons.

I get this error:
Uncaught Cannot extend unknown button type: copyHtml5

When i try all the packages load in with a cdn then the html5 buttons works, but when i use it with importmap it doesn't. It cannot find the extension copyHtml5, but this extension is in the datatables.net-buttons package.

This is the content of my app.js

import $ from 'jquery';
window.$ = window.jQuery = $;

import './bootstrap.js';
import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/sb-admin-2.css';
import './styles/app.css';
import './styles/select2-bootstrap-5-theme.min.css';
import 'select2/dist/css/select2.min.css';

// Datatables
import DataTable from 'datatables.net-bs5';
import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css';
import 'datatables.net-fixedheader';

import pdfMake from 'pdfmake';
import jszip from 'jszip';
pdfMake.fonts = {
    Roboto: {
        normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
        bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
        italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
        bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
    },
};

import 'datatables.net-buttons';
import 'datatables.net-buttons-bs5';
window.DataTable = DataTable;

import '@popperjs/core';

And the content of my datatable template:

<script type="module">
        $('<div class="loading">Loading</div>').appendTo('body');
        DataTable.ext.buttons.alert = {
            className: 'buttons-alert',

            action: function (e, dt, node, config) {
                alert(this.text());
            }
        };
        let table = new DataTable('#stockListTable', {
            layout: {
                topStart: {
                    buttons: [
                        {
                            extend: 'copyHtml5',
                            text: 'copy'
                        },
                        {
                            extend: 'excel',
                            text: 'Excel'
                        },
                        {
                            extend: 'pdf',
                            text: 'Save current page',
                        },
                        {
                            extend: 'alert',
                            text: 'My button 3'
                        },
                    ],
                }
            },
            fixedHeader: true,
            pageLength: 100,
            ajax: '/api/stock/list',
            columns: [
                { data: 'sku' },
                { data: 'name' },
                { data: 'packing' },
                { data: 'brandName' },
                { data: 'locationName' },
                { data: 'count' },
                { data: 'reservedCount' },
            ],
            initComplete: function (settings, json) {
                $('div.loading').remove();
            }
        });
    </script>

<table id="stockListTable" class="table table-striped table-bordered table-sm">
        <thead>
        <tr>
            <th>Artikelnummer</th>
            <th>Naam</th>
            <th>Verpakking</th>
            <th>Merk</th>
            <th>Locatie</th>
            <th>Voorraad</th>
            <th>Gereserveerd</th>
        </tr>
        </thead>
    </table>

Can you help me tackle this issue?

Thanks!

allan

You need to also import the export buttons: datatables.net-buttons/js/buttons.html5

import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons-bs5';

The download builder can help you with that.

You'll need to pass pdfmake and jszip to the library as well:

DataTables.Buttons.jszip(jszip);
DataTables.Buttons.pdfMake(pdfmake);

Here is a Vue example which uses that approach.

I'll update the download builder to include the jszip / pdfmake stuff as well.

Allan

PTChamp

Hi Alan,

Thanks!

The datatables.net-buttons/js/buttons.html5 package did the trick!