Is it possible to generate PDF using jQuery?

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?

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.

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.

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.

I think You can Use this plugin

http://parall.ax/products/jspdf

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
    // }
})

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/

BY using below code,we can generate PDF in jquery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    $("body").on("click", "#btnExport", function () {

        html2canvas($('[id*=table2]')[0], {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 520,
                       
                    }]
                };
                pdfMake.createPdf(docDefinition).download("Paper.pdf");
            }
        });

        function1 () 

            html2canvas($('[id*=tab1]')[0], {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 520,

                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("Paper.pdf");
                }
            });
    });
</script>