jsPDF not working with images

Question

I am trying to generate pdf on client-side using jsPDF library. My code looks like

Answer 1

call doc.output after building the doc:

doc.addImage(imgData, 'JPEG', 15, 40, 200, 114);
doc.output('datauri');

Answer 2

jsPDF supports only JPEG format of the images for now.

Your image var imgData = 'data:image/png;base64,iVBORw... is in PNG format.

Answer 3

Include the following file to your HTML:

<script src="Scripts/jspdf/png_support/zlib.js"></script>
<script src="Scripts/jspdf/png_support/png.js"></script>
<script src="Scripts/jspdf/FileSaver.js"></script>
<script src="Scripts/jspdf/jspdf.js"></script>
<script src="Scripts/jspdf/jspdf.plugin.addimage.js"></script>
<script src="Scripts/jspdf/jspdf.plugin.png_support.js"></script>

You can get all these files from https://github.com/MrRio/jsPDF

FileSaver.js from libs/FileSaver.js zlib.js and png.js from libs/png_support.js

If you don't need to save pdf file, you can exclude FileSaver.js.

When it alerts missing some functions, opening dist/jspdf.debug.js, search for it name to find particular module containing it and include it in above list(after jspdf.js file).

Answer 4

if you want to add a png image, you have to get the latest jspdf.js and add the support png libraries

<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.js"></script>

then in the script, change the format to 'PNG'

<script>
    var doc = new jsPDF();
    var imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABy...
    doc.setFontSize(40);
    doc.text(30, 20, 'Hello world!');
    doc.addImage(imgData, 'PNG', 15, 40, 200, 114);
    doc.output('datauri');
</script>