Converting Div into PDF INCLUDING images

Question

am referencing this post Download a div in a HTML page as pdf using javascript

which basically uses jspdf to make a div into a pdf. I got it to work, but the only problem is I can't get it to add an image as well that would be contained in the div. In other words, I can get the text that's in the div to be a pdf but not the image inside.

score 8 · Accepted Answer · answered Feb 27 '17 at 13:22

8

One solution is to use the html2canvas or rasterizeHTML library. They create a canvas of the HTML page which you can then add to the PDF using addHTML

$('#cmd').click(function() {
  var options = {};
  var pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addHTML($("#content"), 15, 15, options, function() {
    pdf.save('pageContent.pdf');
  });
});

Demo

answered Feb 27 '17 at 13:22

Tony

9,672
3
47
75

1

thanks for this! question, why does the image have the data:image/ in there. Would I have to do that for every image? here is what i mean. http://jsfiddle.net/n899opf1/ – Deedub Feb 27 '17 at 17:24
It seems that only embedded images (data urls) can be rendered in to the PDF; otherwise the library would have to make HTTP requests for external resources. This is also mentioned in [this example](http://rawgit.com/MrRio/jsPDF/master/), where it says "You'll need to make your image into a Data URL. Use http://dataurl.net/#dataurlmaker" – Tony Feb 27 '17 at 18:50
You should be able to automate the conversion of images (at least, on the pages you want to be able to convert to PDF) by the use of a bas64 encoding function. Specifics will depend on the code used to implement your site. – Tony Feb 27 '17 at 18:56
ok that makes sense so each call needs to have the data conversion manual? – Deedub Feb 27 '17 at 23:35
I'm not exactly sure what you mean by "...each call needs to have the data conversion manual?". I was saying you can change the code of your site to automatically change images from links to embedded data urls using a base64 encode function. php has a function base64_encode_image, [see here for an example](http://stackoverflow.com/a/25987300/243925). – Tony Feb 28 '17 at 20:56
yeah, that's what I meant. Converting the image in the div. Thanks Tony! – Deedub Mar 01 '17 at 16:25
I am getting the error payments.js:16109 Uncaught (in promise) Error: Element is not attached to a Document – Jaber Al Nahian Jul 24 '19 at 05:53
@JaberAlNahian - Please post your problem as a new question (linked to this one if you like) and show your code and full error report. It's difficult to properly answer your question in the comments. – Tony Jul 24 '19 at 16:45

score 0 · Answer 2 · answered Jul 03 '18 at 11:15

This code may help(It worked for me):

<script type="text/javascript">
 $(document).ready(function () {
  setTimeout(function(){
   downloadImage();
  },1000)
 });
 
 function downloadImage(){
  html2canvas(document.querySelector("#divID")).then(canvas => {
  a = document.createElement('a'); 
  document.body.appendChild(a); 
  a.download = "test.png"; 
  a.href =  canvas.toDataURL();
  a.click();
 });
 }  
 </script>

Converting Div into PDF INCLUDING images

2 Answers2

Linked