Lazy load pdfmake

fredsmith

I am very grateful for datatables!

I would like to defer loading of the pdfmake and zip libraries used for export until if/when user clicks the download pdf or excel button.

I saw question https://datatables.net/forums/discussion/47810/has-anyone-looked-into-lazy-aysnc-loading-of-the-pdf-export-function which asks exactly this, and the answer to look into custom buttons. That discussion is now closed so I can't ask a follow up directly.

I wondered if the custom button would have to be written from scratch (perhaps based on the source code of the original buttons) or if there is some way to extend the original buttons. I know that buttons have an extend feature but I'm not sure if that is relevant.

Alternatively is there any way to force the buttons plugin to render the pdf and Excel buttons even if pdfmake is not loaded at the time they table is initialised? Perhaps by creating a dummy pdfmake function? The actual pdfmake library could then be set to defered download so it will be available usually within a few seconds of page load.

kthorngren

The buttons.buttons.action can be used to call one of the export options. See the last example in the docs. I think what Allan is suggesting is to load PDFMake in the action function then execute the desired export.

Kevin

fredsmith

Thank you very much!

fredsmith

In case it helps anyone here is the code I used (using ESM):

module pdf-lazy

import pdfmake from 'pdfmake'

// some custom vfs stuff here

function createPdf(doc) {
    return pdfmake.createPdf(doc)
}

export { pdfmake }

module datatables-custom-buttons

import $ from "jquery";

// set up a stub for pdfmake that will lazy load the real pdfmake when needed
// code based on https://github.com/DataTables/Buttons/blob/master/js/buttons.html5.js
// and https://datatables.net/forums/discussion/70831

const lazyPdf = {
    className: 'buttons-lazypdf',
    text: 'PDF',
    action: function (e, dt, node, config) {
        import('./pdf-lazy')
            .then(module => {
                window.pdfmake = module.pdfmake
                $.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, node, config);
            })
    },
    title: '*',

    filename: '*',

    extension: '.pdf',

    exportOptions: {},

    orientation: 'portrait',

    pageSize: 'A4',

    header: true,

    footer: false,

    messageTop: '*',

    messageBottom: '*',

    customize: null,

    download: 'download'
}



export { lazyPdf }

module datatables

import { lazyPdf } from './datatables-custom-buttons'
$.fn.dataTable.ext.buttons.lazyPdf = lazyPdf