jspdf : add image to pdf but abobe reader can't read the file?

Question

I am using jspdf in my project to convert some charts to a pdf. My framework is angularjs 1.5.6, the chart is generated by chart.js. The html fragment is as below:

<div name="charts" class="charts">

    <div class="ft" style="width:45%; height:550px; margin-top: 20px;margin-left:2%;">
        <canvas id="biChart" class="chart chart-bar" chart-data="biData" chart-labels="biLabels" chart-options="biOptions" chart-series="series" chart-colors="biColors" chart-dataset-override="biDatasetOverride"></canvas>
    </div>

    <div class="fr" style="width:45%; height:550px; margin-top: 20px;margin-right:2%;">
        <canvas id="qzsChart" class="chart chart-bar" chart-data="qzsData" chart-labels="qzsLabels" chart-options="qzsOptions" chart-series="series" chart-colors="qzsColors" chart-dataset-override="qzsDatasetOverride"></canvas>
    </div>

</div>

The export function is as below:

$scope.exportChart = function() {
        var biChart = document.getElementById("biChart");
        var qzsChart = document.getElementById("qzsChart");
        var doc = new jsPDF('p', 'mm');
        var text = "Sample Charts";
        var xOffset = (doc.internal.pageSize.width / 2) - (doc.getStringUnitWidth(text) * doc.internal.getFontSize() / 2);
        doc.text(text, xOffset, 10);
        doc.addImage(biChart.toDataURL('image/png'), 'PNG', 10, 10);
        doc.addPage();
        doc.addImage(qzsChart.toDataURL('image/png'), 'PNG', 10, 10);
        doc.save('sample-chart.pdf');
    }

Now the result is , I can see the generated pdf in browser. However, when I use adobe reader to open the file, it said:

Anything wrong with my codes?

Answer 1

You can give image in your html part.

JS Code

var pdf = new jsPDF('l','pt','a4');
                pdf.addHTML($('#invoicearea'),function() {
                    var courseenrollmentid = $(".courseenrollmentid").text();
                    pdf.output("save", "InvoiceReceipt"+courseenrollmentid+".pdf");
                });    

HTML CODE

 <div id="invoicearea" style="background-color: white; padding: 20px;">
        <div class="row-fluid">
            <div class="span6">
                <img style="width:20%;" alt=""
                    src="<%=request.getContextPath()%>/assets/app/images/invoicelogo.png">
            </div>
            <div class="span6">
                <address class="invoiceheader">
                    <h4 class="righttext martop20">Invoice Number : {{#if orderno}}<span class="courseenrollmentid">{{orderno}}</span>
                        {{else}}<span class="courseenrollmentid">-</span>{{/if}}</h4>
                    <h4 class="righttext martop20">Invoice Date: {{paymentdate}}</h4>
                </address>
            </div>
        </div>
        <h3 class="invoicereceipt">Invoice Receipt</h3>
        <div class="invoicepart">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Course Title</th>
                        <th>Course Author</th>
                        <th>Price<span class="rubee" style='font-family;'>(&#8377;)</span></th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{coursetitle}}</td>
                        <td>{{firstname}}</td>
                        <td>{{price}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row-fluid">
            <address class="invoiceaddress">
                <h4>For Details Contact</h4>
                <h4><s:text name="label.productname"></s:text></h4>      
            </address>
        </div>
    </div>