Lazy load pdfmake

Lazy load pdfmake

fredsmithfredsmith Posts: 4Questions: 1Answers: 0

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 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.

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 18,215Questions: 25Answers: 4,322
    edited December 2021 Answer ✓

    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.


  • fredsmithfredsmith Posts: 4Questions: 1Answers: 0

    Thank you very much!

  • fredsmithfredsmith Posts: 4Questions: 1Answers: 0

    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
    // and
    const lazyPdf = {
        className: 'buttons-lazypdf',
        text: 'PDF',
        action: function (e, dt, node, config) {
                .then(module => {
                    window.pdfmake = module.pdfmake
                    $, 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
Sign In or Register to comment.