JSPDF - Appending image and HTML table to the same pdf file

2.5k views Asked by At

I trying to export google chart and an HTML table using jsPDF. As google chart cannot be exported I've created an image and added it to pdf using pdf.addImage(). and then using 'pdf.fromHTML()' method appending the table to the same pdf file. Provided higher top margin value to display the it below to the image.

 function exportChart() {
    var pdf = new jsPDF('p', 'pt', 'letter');

    //Creating the image from chart and adding to the pdf
    var img = document.getElementById("graphImg");
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    pdf.addImage(dataURL, "PNG", 100,20); 
    canvas = null;

    //Adding the html table to the same pdf file 
    source = $('#graphDiv')[0];
    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true;
        }
    };
    margins = {
        top: 300, // Providing high top margin value to make the table below to the image
        bottom: 60,
        left: 80,
        width: 400
    };
    pdf.fromHTML(
    source, 
    margins.left, 
    margins.top, { 
        'width': margins.width, 
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        pdf.save('Export.pdf');
    }, margins);
}

Everything works fine and pdf exported perfectly when the table is small, but when the table size is high some of the rows are appended to the new pdf page but with top-margin 300. This makes lots of blank space in second page. Please help to solve this issue.

0

There are 0 answers