Add Print as pdf option in web page

Question

I want to print the image shown below as a PDF by providing a print option on my web page, I have the image path and other details that I want in the pdf such as date, description etc on the database. I want to print the image by providing the URL and details that I can get from the database. Thank you

Answer 1

jspdf seems to be ok for your requirements, you can build pdf file containing image. It is quite simple in fact :

var doc = new jsPDF();
doc.setFontSize(40);
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

The only problem here from my understanding is that your have to get image from url then convert it to base64.

Here is a working solution :

https://codepen.io/bcaure/pen/OEVyKB

 var xmlHTTP = new XMLHttpRequest(); xmlHTTP.open('GET', 'https://gravatar.com/avatar/09e327bdf4e6fc03bdda0fbaccf18132', true); xmlHTTP.responseType = 'blob'; xmlHTTP.onload = function() { var reader = new FileReader(); reader.readAsDataURL(xmlHTTP.response); reader.onload = function(url){ var doc = new jsPDF(); doc.addImage(url.target.result, 'JPEG', 15, 40, 180, 160); doc.save('two-by-four.pdf'); }; }; xmlHTTP.send();