Image not rendering on PDF using jsPDF?

newbie picture newbie · Apr 22, 2015 · Viewed 10.2k times · Source

I have included the following files:

<script type="text/javascript" src="libs/png_support/zlib.js"></script>
<script type="text/javascript" src="libs/png_support/png.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.png_support.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jspdf.js"></script>

And I am just testing if it could render a image through html:

var doc = new jsPDF();
   var elementHandler = {
     '#ignorePDF': function (element, renderer) {
       return true;
     }
   };
   var source = '<img src="/assets/common/image/BG.jpg"/>';
   doc.fromHTML(
       source,
       15,
       15,
       {
         'width': 180,'elementHandlers': elementHandler
       });

   doc.output("dataurlnewwindow");

It throws this error on console which says:

jsPDF Warning: rendering issues? provide a callback to fromHTML! (anonymous function)

I have used PNG format, since it was not working I also tried with JPG format, still no luck! What am I doing wrong? Thanks in advance.

Answer

klihelp picture klihelp · May 6, 2015

Have one more argument for fromHTML()

doc.fromHTML(
    source,
    15,
    15, {
        'width': 180,
        'elementHandlers': elementHandler
    },

    function(dispose) {
        // dispose: object with X, Y of the last line add to the PDF
        //          this allow the insertion of new lines after html
        // pdf.save('Test.pdf');

        if (navigator.msSaveBlob) {
            var string = doc.output('datauristring');
        } else {
            var string = doc.output('bloburi');
        }

        $('.previewIFRAME').attr('src', string);
    })