create pdf with jsPDF

Question

I have a php page in a div

<div id="content">
    ....
    <img src="link">

    <div>
        <?php echo $content1; ?>
    /div>
    <table border = 1>
        <tr>
            <td><?php echo $content1; ?></td>
            <td><?php echo $content1; ?></td>
        </tr>
    </table>
</div>

<button onClick="generatePDF()" >generate PDF</button>

function generatePDF()
{
    var pdf = new jsPDF('p', 'mm', 'a0');
    var canvas = pdf.canvas;

    canvas.height = 297;
    canvas.width = 210;

    html2canvas($('#estimateContent').get(0), {
        canvas:canvas,
        allowTaint: true,
        onrendered: function (canvas) {
            pdf.save("Current Data2.pdf")   
        }
    });
}

The PDF is empty. How to generate a pdf like my div?

THanks a lot

Answer 1

There is no property for jsPDF such as pdf.canvas

You could use canvas.toDataUrl() and jsPDF.addImage() to render data from canvas in pdf. Code should be something like this ( with minor adjustments for dimensions of canvas and paper for pdf):

<div id="content">
....
<img src="link">

<div>
<?php echo $content1; ?>
/div>
<table border = 1>
<tr>
<td><?php echo $content1; ?></td>
<td><?php echo $content1; ?></td>
</tr>
</table>
</div>

<button onClick="generatePDF()" >generate PDF</button>

function generatePDF()
{
    html2canvas($('#content'), {
        allowTaint: true,
        onrendered: function (canvas) {
            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var pdf = new jsPDF('p', 'mm', 'a0');

            pdf.addImage(imgData, 'JPEG', 0, 0);
            pdf.save("Current Data2.pdf")
        }
    });
} 

Or you could use html2pdf in addition to jsPDF and html2canvas: https://github.com/eKoopmans/html2pdf

Here is an actual application on your code sample:

<div id="content">
....
<img src="link">

<div>
<?php echo $content1; ?>
/div>
<table border = 1>
<tr>
<td><?php echo $content1; ?></td>
<td><?php echo $content1; ?></td>
</tr>
</table>
</div>

<button onClick="generatePDF()" >generate PDF</button>

function generatePDF()
{

    var element = document.getElementById('content');

    html2pdf(element, {
        margin:       1,
        filename:     'Current Data2.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { dpi: 192, letterRendering: true,  allowTaint: true, onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            //if you need to perform some actions, cleanup, etc after the canvas has been generated
        } },
        jsPDF:        { unit: 'mm', format: 'a0', orientation: 'portrait' }
    });

}