Is it possible to generate PDF using jQuery?

Question

I am using Ajax functionality to retrieve my content and I need to export PDF on success of jQuery.ajax(). How can I do that?

Answer 1

Add this to your Script:

<script src="https://docraptor.com/docraptor-1.0.0.js"></script>

DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
    test: false, // test documents are free, but watermarked
    type: "pdf",
    name: planStatus+"_" +assessmentYear+"_"+employeeId+ ".pdf",
    document_content: document.querySelector('#MyDoc').innerHTML, // use this page's HTML
    // document_content: "<h1>Hello world!</h1>",               // or supply HTML directly
    // document_url: "http://example.com/your-page",            // or use a URL
    // javascript: true,                                        // enable JavaScript processing
    // prince_options: {
    //   media: "screen",                                       // use screen styles instead of print styles
    // }
})

Answer 2

I think You can Use this plugin

http://parall.ax/products/jspdf

Answer 3

jQuery cannot (because JavaScript cannot) create a PDF from data, no...it can get one from your server (like any other request), but it cannot generate one. JavaScript simply doesn't have a mechanism (though there are some HTML5 options being implemented now) to create/save a file that works cross-browser, especially a binary file.

Answer 4

If at all possible, the server-side is a better choice for generating PDFs. It's probably going to be faster for most users and returning a file via standard HTTP request is much more robust than the current client-side options.

That said, this library will generate a PDF on the client-side: http://snapshotmedia.co.uk/blog/jspdf

In browsers that support data URIs, it can return the PDF directly. In other browsers, you can couple it with a Flash component called Downloadify to accomplish the same.

Answer 5

If the HTML you are dealing with is a table, you can use the jquery.dataTables plug in with TableTools to generate PDF. It uses Flash behind the scenes and is severely limited on formatting, but it does generate PDF.

http://datatables.net/extras/tabletools/

Answer 6

If you are retrieving PDF data from your server in your AJAX success and need to output it to your user as a download, it can be accomplished with a tiny bit of base64 encoding. If I understand correctly, you most likely have a scenario where your server is possibly returning a PDF or some other data type on success (like XML). In this case, you have two steps to handle the request:

1) Determine the content type via its header. Here is an example of splitting your handler based on the response:

$.ajax({

  type: "POST", url: "/test", data: someData, success: function(response, status, xhr){ 
    var ct = xhr.getResponseHeader("content-type") || ""; 
    if (ct.indexOf(‘xml’) > -1) {
      // handle xml here
    }
    if (ct.indexOf(‘pdf’) > -1) {
      // handle pdf here
    }    
  } 
});

2) Once you have your PDF content, you can redirect the browser to show the pdf by using a base64 data trick. First, encode the data content in base64. There are a number of libraries to help you do this in Javascript. Then, return your content via document.location.href:

document.location.href = 'data:application/pdf;base64,' + base64PDFData;

That should get what you need. You could theoretically forward any content-type to the browser in this method.

EDIT:

I should mention that the data uri will unfortunately not work in IE due to security restrictions.