使用jspdf将多个表导出为PDF

时间:2015-10-08 09:38:36

标签: pdf jspdf export-to-pdf

我在页面上有两个表要导出为PDF,我已经设法将第一个表导出到pdf就好了,但是我似乎无法将第二个表导出到同一页面上。

这是我目前的代码:

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');
})

在代码中我尝试使用columns2和rows2数组来添加第二个表但是我似乎无法使其工作。我的两个表目前只是小表,所以我希望它们都在同一页面上。我设法通过添加新页面来实现这一点,但它看起来很糟糕。

任何有关此的帮助和建议都会很棒。

1 个答案:

答案 0 :(得分:1)

使用doc.autoTableHtmlToJson获取表格的列和行

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