pdfmake: Understanding content.splice()

cce1911

The docs reference the ability to customize the document object using a callback function, in the example https://datatables.net/reference/button/pdfHtml5

    function ( doc ) {
                // Splice the image in after the header, but before the table
                doc.content.splice( 1, 0, {
                    margin: [ 0, 0, 0, 12 ],
                    alignment: 'center',
                    image: 'data:image/png;base64...'
                } );

I'm trying to insert a page footer containing a URL, but I can't find any documentation on content.splice(). Is this a datatables function or a pdfmake function? Nothing I've tried so far works. How do I add a page footer on every page?

cce1911

OK, so I figured out that slice() is simply adding to the doc.content array, but It seems that I can't use the 'footer' option.

doc.content.splice(1, 0,
    {
        margin: [0, 0, 0, 12],
        alignment: 'center',
        image: 'data:image/png;base64,...',
    },
    {
        text: "Some text string",
        alignment: 'center'
    },
    {
        footer: {
            columns: [
                {text: 'Left part', alignment: 'left', margin:[20] },
                {text: 'Right part', alignment: 'right', margin:[0,0,20] }
            ]
        }
    }
);

If I go to http://pdfmake.org/playground.html the footer option works fine, but datatables has it's own 'footer' option and there must be some sort of conflict because I get an exception in pdfmake.js when I use the code above.

Uncaught Unrecognized document structure: {"footer":{"columns":[{"text":"Left part","alignment":"left","margin":[20]},{"text":"Right part","alignment":"right","margin":[0,0,20]}]},"margin":[0,0,0],"_margin":null}

Any ideas?

allan

Possibly one for the pdfmake support channels (which appears to be its GitHub issue tracker).

However, it looks like you are inserting the footer into a new object in the document structure. I would suggest that actually you want to add it into the existing object that defines the table. Adding console.log( doc.content ) into your function will let you see the object structure on your browser's console, and thus how you should manipulate it to add the option(s) you want.

Allan

cce1911

Thanks for the answer Allan, you pointed me in the right direction. Just in case anyone else is trying to skin this cat, here is how I did it:

var cols = [];
cols[0] = {text: 'Left part', alignment: 'left', margin:[20] };
cols[1] = {text: 'Right part', alignment: 'right', margin:[0,0,20] };
var objFooter = {};
objFooter['alignment'] = 'center';
objFooter['columns'] = cols;
doc["footer"]=objFooter;
doc.content.splice(1, 0,
    {
        margin: [0, 0, 0, 12],
        alignment: 'center',
        image: 'data:image/png;base64,...',
    }
);

allan

Awesome - thanks for posting back with your solution.

Allan

marko89kv

Hi guys, a bit of an offtopic, but has anyone tried adding html content to PDF?
As in a table, or whatever for that matter?

allan

My understanding is that it doesn't work in pdfmake at the moment. You have to use the styling options that pdfmake offers (or use a different library).

Allan

marko89kv

Thank you for your response, I went with adding text and juggling new lines, spaces and tabs :)