Tabulator pdf download formatting

Question

I am having some trouble getting the pdf to format in the way that I am after. It seems at the moment, the table is being drawn on top of everything at a set location rather than after the header data I am trying to put at the top. The logic would be to start drawing the table after the last element within the autoTable function. I would also like to make the font size within the table smaller though the AutoTable setFontSize does not seem to apply to the table either.

You can see the result if you download the pdf at the bottom of this page: https://rhinoaustralia.com/price-list/

The code is as follows:

//trigger download of data.pdf file
$("#download-pdf").click(function(){
var today = new Date(); 
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDay();
table.download("pdf", "price-list.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Price List", //add title to report
autoTable:function(doc)
{ 
    var margins = 30;
    var marginsIndent = 20;
    doc.text("Name: ", margins, margins);
    doc.text(document.getElementById("user-name").value, margins + 60, margins);
    doc.text("Club: ", margins, margins+10);
    doc.text(document.getElementById("user-club").value, margins + 60, margins + 10);
    doc.text("Phone: ", margins, margins+20);
    doc.text(document.getElementById("user-tel").value, margins + 60, margins + 20);
    doc.text("Email: ", margins, margins+30);
    doc.text(document.getElementById("user-email").value, margins +60, margins + 30);
    doc.text("Date: ", margins, margins+40);
    doc.text(date, margins + 60, margins + 40);
    doc.setFontSize(10); //Want the tables font to be this size
},
})
});

I think my understanding of the autoTable integration in Tabulator is at fault here.

looking at your site you seem to have resolved this issue, would you mind posting your solution so others may learn from it? — Oli Folkerd

8r3nd4n 8r3nd4n · Accepted Answer · 2019-12-26T04:55:25

It is all working as expected now. The part that I was after was the return styles at the end of the pdf creation. There is a startY value that pushes the table down x amount of units on the first page.

//trigger download of data.pdf file
$("#download-pdf").click(function()
{
    var logo = "Base64CodeImg"; //Really long string of the logo in base 64
    var today = new Date(); 
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDay();
    var doc = new jsPDF("p", "mm", "a4");

    table.download("pdf", "price-list.pdf", {
    orientation:"portrait", //set page orientation to portrait
    autoTable:function(doc)
    { 
        var margins = 30;
        var leftMargin = 40;
        var marginsIndent = 40;
        doc.addImage(logo, 'PNG', 400, 20, 120, 120);
        doc.text("Name: ", marginsIndent, 40);
        doc.text(document.getElementById("user-name").value, marginsIndent + 60, 40);
        doc.text("Club: ", marginsIndent, 60);
        doc.text(document.getElementById("user-club").value, marginsIndent + 60, 60);
        doc.text("Phone: ", marginsIndent, 80);
        doc.text(document.getElementById("user-tel").value, marginsIndent + 60, 80);
        doc.text("Email: ", marginsIndent, 100);
        doc.text(document.getElementById("user-email").value, marginsIndent +60, 100);
        doc.text("Date: ", marginsIndent,120);
        doc.text(date, marginsIndent + 60, 120);
        doc.setFontSize(10); //Want the tables font to be this size
        return {
            styles: {cellPadding: 2, fontSize: 8},
            startY: 180, //This was the way to push the start of the table down
        };
    },
    })
});

Tabulator pdf download formatting

1 Answers