CODEWITHSUNDEEP
pdfjspdfexport-to-pdf
Adam13Hylo
Adam13Hylo

Reputation: 117

Export Multiple Tables to PDF using jspdf

I have two tables on a page that I want to export to PDF, I have managed to get the first table to export to the pdf just fine, however I cannot seem to get the 2nd table to export onto the same page.

This is the code I currently have:

var columns = [];
var rows = [];
var columns2 = [];
var rows2 = [];

$(document).ready(function () {
    demoFromHTML();
})

function demoFromHTML() {
$('#exportpdf').click(function () {

    var doc = new jsPDF();
    doc.text(20, 20, 'Name: ' + $('#name').val() + " " + "month: " + $('#month').val());


    $('#dataTbl th').each(function () {
        columns.push({title: $(this).html(), dataKey: $(this).html()});
        console.log(columns);
    })

    $('#dataTbl .repeatingSection').each(function () {
        rows.push({"code1": $('#code1').val(), "code2": $('#code2').val(), "code3": $('#code3').val(), "code4": $('#code4').val(), "code5": $('#code5').val()});
    })

    $("#mytotals th").each(function () {
        columns2.push({ title: $(this).html(), dataKey: $(this).html() })
    })

    rows2.push({ "Total codes": $('#totalinpts').val(), "Total codes for month": $('#month').val() });

    var doc = new jsPDF('p', 'pt');
    doc.autoTable(columns, rows, {
        styles: {fillColor: [100, 255, 255]},
        columnStyles: {
            id: {fillColor: 255}
        },
        margin: {top: 60},
        beforePageContent: function(data) {
            doc.text("Header", 40, 30);
        }
    });

    doc.autoTable(columns2, rows2, {
        styles: { fillColor: [100, 255, 255] },
        columnStyles: {
            id: { fillColor: 255 }
        },
        margin: { top: 60 },
    });

    doc.save('Test.pdf');
})

In the code I have tried to use the columns2 and rows2 array to add the second table however I cannot seem to get this to work. Both my tables are currently only small tables so I want them both on the same page. I have managed to get this working by adding a new page however it looks awful.

Any help and advice with this would be great.

Upvotes: 1

Views: 3369

Answers (1)

AbdulQavi
AbdulQavi

Reputation: 11

Use doc.autoTableHtmlToJson to get columns and rows of a table

var tbl_res = doc.autoTableHtmlToJson(document.getElementById('table_ID'));        
doc.autoTable(tbl_res.columns, tbl_res.data, options);

Upvotes: 1

Related Questions