0

I have an html table defined based on dynamic data. The table contains a thead, tfoot and tbody. The tfoot is mapped to specific values within my json. However, when using JSPDF Autotable and exporting to PDF the footer is not rendered. I have seen information but no code examples of the showfoot option and have tried it after the doc.autotable, and even after the style options but to no avail. The footer is not exported. I'm sure it super simple - but I can't seem to figure it out. Note: I do not want JSDPF Autotable to 'create' a footer - it is defined, it is part of my table - I simply want it rendered on the pdf. I found an old stackoverflow from 2016 where this was mentioned - Simon B. commented it would be added - the topic was closed - but I couldn't find a code example anywhere.

Here is my jspdf autotable code where I have tried to 'show my footer' - but to no avail. Any assistance appreciated.

<script>
function generate() {
    //Creation of PDF document
    let doc = new jsPDF('l', 'pt');
    const totalPagesExp = '{total_pages_count_string}';


    var elem = document.getElementById('${pm.info.requestId}');
    var data = doc.autoTableHtmlToJson(elem);

    doc.autoTable(data.columns, data.rows, {
        headStyles: {
            cellWidth: 'wrap',
            fontSize: 10,
            lineWidth: 0,
            lineColor: [0, 0, 0],
            textColor: [0, 0, 0],
            fillColor: [255,255,255]
        },
        bodyStyles: {
            cellWidth: 'wrap',
            fontSize: 8,
            lineWidth: 0,
            lineColor: [0, 0, 0],
            textColor: [0, 0, 0],
            fillColor: [255,255,255]
        },
        footStyles: {
            cellWidth: 'wrap',
            fontSize: 10,
            lineWidth: 0,
            lineColor: [0, 0, 0],
            textColor: [0, 0, 0],
            fillColor: [211,211,211]
        },
        //Formatting of pages
        didDrawPage: function (data) {
            //Summa logo on top of the page
            doc.addImage('${pm.variables.get("summa")}', 'PNG', 20, 20, 145, 42.63);
            //Font sizes of report information
            doc.setFontSize(8);
            //Report information: portfolio name, knowledge time and report time
            doc.text(35, 75, '${pm.variables.get("portfolioName")}');
            doc.text(35, 85, '${pm.variables.get("reportTime")}');
            doc.text(35, 95, '${pm.variables.get("knowledgeTime")}');
            //Page numbers
            var str = "Page " + doc.internal.getNumberOfPages()
            if (typeof doc.putTotalPages === 'function') {
                str = str + " of " + totalPagesExp;
            };
            //Page size
            var pageSize = doc.internal.pageSize;
            var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
            doc.text('Theme "plain"', 14, 16);
        },
        margin: {
            top: 100
        },


    });
    //Number of pages
    if (typeof doc.putTotalPages === 'function') {
        doc.putTotalPages(totalPagesExp);
    },

    //--------------------------------------------------------------------------------------------------START
    //Change name of report if desired
    doc.save('${pm.info.requestName}${pm.variables.get("reportTime")}.pdf');
    //--------------------------------------------------------------------------------------------------END
}

  • I tried using ShowFoot: 'EveryPage' after the Margin - and after the driDrawPage and after var data - none worked – Thomas Zdon Jan 29 '20 at 12:13

1 Answers1

1

Not sure if you already managed to export footer totals to the jspdf. I got it to working, with a small adjustment.

Replace the var elem = document.getElementById('${pm.info.requestId}'); to var elem = document.getElementById('NAME');

And replace the doc.autoTable(data.columns, data.rows, { to doc.autoTable({html: '#NAME',