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?

score 16 · Accepted Answer · answered Dec 20 '10 at 13:23

16

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.

answered Dec 20 '10 at 13:23

Nick Craver

623,446
136
1,297
1,155

11

yes, it is possible to generate a pdf with javascript... http://stackoverflow.com/questions/742271/generating-pdf-files-with-javascript – Timo Huovinen Jan 18 '12 at 17:13
1

@YuriKolovsky - That doesn't work in all browsers, it's using data URIs (and may require a plugin), the above answer is still true: "JavaScript simply doesn't have a mechanism to create/save a file **that works cross-browser**" – Nick Craver Jan 18 '12 at 17:22
1

I don't see the question mentioning **cross-browser** – Timo Huovinen Jan 19 '12 at 08:31
5

@YuriKolovsky - Most web developers actually care if their content works in *most* browsers at least, if you don't then either you're in a tightly controlled intranet environment, or you're doing something wrong. – Nick Craver Jan 19 '12 at 11:12
5

so you should provide answers to both intranet environment developers and non intranet ones, because the question does not mention which type of user the OP is, so just saying that it's not possible might be misleading to the OP or someone else. – Timo Huovinen Jan 19 '12 at 12:23
1

@YuriKolovsky - I said it JS didn't have a mechanism cross-browser...again, how is this incorrect? I answered that it can't because **at the time the answer was posted** that was true for **almost every web browser**. Saying "yes you can do X" when in the *vast majority of cases* that's **not** true is far more misleading. – Nick Craver Jan 19 '12 at 14:38
1

the question and answer I linked existed before this question was asked, so you could of answered: yes you can do X, but it will work only in Z. Then it would not be misleading. You could even post that you would not recommend doing it, and would suggest to do Y instead because of reason B. – Timo Huovinen Jan 19 '12 at 19:49
2

@TimoHuovinen, you sir deserve an argumentation badge. – Patrick Bard Feb 13 '14 at 11:36

score 5 · Answer 2 · edited May 23 '17 at 12:25

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.

score 5 · Answer 3 · answered Jan 15 '14 at 05:21

5

I think You can Use this plugin

http://parall.ax/products/jspdf

answered Jan 15 '14 at 05:21

akaco

663
3
11
27

score 5 · Answer 4 · answered Dec 20 '10 at 13:42

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.

score 3 · Answer 5 · edited Feb 19 '18 at 06:37

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

copy and paste the code to generate pdf, and you can give any name to the pdf ypu want.i have given name taken from variable as per my need — Himanshu Singh, Feb 19 '18 at 06:27

score 2 · Answer 6 · answered Feb 09 '13 at 19:16

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/

score 0 · Answer 7 · answered Apr 03 '22 at 11:04

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>

Is it possible to generate PDF using jQuery?

7 Answers7

Linked