Create PDF on ajax HTML Data Including Image

Question

function CallFuncation() {
  $.ajax({
    type: "POST",
    url: "Method",
    data: '',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(GetData) {
      //generated pdf with download including images

    }
  });
}

Our ajax response data below

GetData = "<h1>Employee List</h1><table border="1" width="100%"><tbody><tr><th>Sr. No</th><th>Name</th><th>Email</th><th>Photo</th></tr><tr><td>1</td><td>Alpesh</td><td>alpesh@gmail.com</td><td><img width="50px" src="images/1.jpg"></td></tr><tr><td>2</td><td>Rajesh</td><td>rajesh@gmail.com</td><td><img width="50px" src="images/2.jpg"></td></tr></tbody></table>"

We required output in pdf same as below image.

Your AJAX call doesn't look like it has anything to do with creating the PDF. All you need is a library like [jsPDF](https://github.com/MrRio/jsPDF) to turn `GetData` into a PDF. — , Aug 23 '18 at 12:34

score 0 · Answer 1 · answered Aug 23 '18 at 14:01

0

There are several possible approaches to do that, if you want to generate the pdf with js in client side, you have to use some library like jsPDF but the problem is that you have to turn the image's url into a base64 string, you could do it using FileReader API or canvas, in both cases you have to extract the image's url from the response.

Another approach, that is easier in my opinion, is to create the pdf in the server using some library like wkhtmltopdf.

answered Aug 23 '18 at 14:01

Emeeus

5,072
2
25
37

We also try to base64 string and using jsPdf no anyone get image in pdf – user3317655 Aug 23 '18 at 14:08
@user3317655 Have you tried like this way https://jsfiddle.net/dox8bjcm/ ? – Emeeus Aug 23 '18 at 14:22

Create PDF on ajax HTML Data Including Image

1 Answers1