Download pdf file using jquery ajax

0 votes

I want to download a pdf file for jquery ajax response. Ajax response contains pdf file data. I tried this solution. My code is given below but I always get a blank pdf.

$(document).on('click', '.download-ss-btn', function () {

    $.ajax({
        type: "POST",
        url: 'http://127.0.0.1:8080/utils/json/pdfGen',
        data: {
            data: JSON.stringify(jsonData)
        }

    }).done(function (data) {
        var blob = new Blob([data]);
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "Sample.pdf";
        link.click();
    });


});

May 27 in JQuery by Edureka
• 13,600 points
128 views

1 answer to this question.

0 votes

Download PDF file with button click using jQuery 
 Clicking the download button will call the DownloadFileJavaScript function. 
 Within the DownloadFile JavaScript function, the URL of the file is passed as a parameter to the jQuery AJAX function.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <input type="button" value="Download PDF File" onclick="DownloadFile('Sample.pdf')" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

    <script type="text/javascript">

        function DownloadFile(fileName) {

            //Set the File URL.

            var url = "Files/" + fileName;


            $.ajax({

                url: url,

                cache: false,

                xhr: function () {

                    var xhr = new XMLHttpRequest();

                    xhr.onreadystatechange = function () {

                        if (xhr.readyState == 2) {

                            if (xhr.status == 200) {

                                xhr.responseType = "blob";

                            } else {

                                xhr.responseType = "text";

                            }

                        }

                    };

                    return xhr;

                },

                success: function (data) {

                    //Convert the Byte Data to BLOB object.

                    var blob = new Blob([data], { type: "application/octetstream" });


                    //Check the Browser type and download the File.

                    var isIE = false || !!document.documentMode;

                    if (isIE) {

                        window.navigator.msSaveBlob(blob, fileName);

                    } else {

                        var url = window.URL || window.webkitURL;

                        link = url.createObjectURL(blob);

                        var a = $("<a />");

                        a.attr("download", fileName);

                        a.attr("href", link);

                        $("body").append(a);

                        a[0].click();

                        $("body").remove(a);

                    }

                }

            });

        };

    </script>

</body>

</html>

answered May 30 by gaurav
• 12,420 points

Related Questions In JQuery

0 votes
0 answers

Download a file by jQuery.Ajax

I have a Struts2 action in the ...READ MORE

May 27 in JQuery by Edureka
• 13,600 points
32 views
0 votes
1 answer

Download File Using JavaScript/jQuery

Suppose you want to download a file ...READ MORE

answered Jun 3 in JQuery by Edureka
• 13,600 points
21 views
0 votes
1 answer

Download File Using JavaScript/jQuery

<!DOCTYPE html> <html> <head> <title> Download File Using JavaScript/jQuery </title> </head> <body> <h1> Download File Using JavaScript/jQuery </h1> <a id="link" ...READ MORE

answered Jun 10 in JQuery by rajatha
• 3,540 points
8 views
0 votes
1 answer

Ajax using JQuery in ASP .NET c#

jQuery Ajax in ASP.Net $.ajax({      & ...READ MORE

answered Jun 15 in JQuery by rajatha
• 3,540 points
8 views
0 votes
1 answer

Abort Ajax requests using jQuery

Instead of aborting, you can choose to ...READ MORE

answered Jun 16 in JQuery by rajatha
• 3,540 points
15 views
0 votes
1 answer

what are the advantages and disadvantages of making ajax calls using jquery?

Advantages of AJAX Reduce server traffic and increase ...READ MORE

answered 5 days ago in JQuery by rajatha
• 3,540 points
5 views
0 votes
1 answer

How to import jQuery UI using ES6/ES7 syntax?

Hii, Add a alias in webpack config: resolve: { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
5,005 views
0 votes
1 answer

How can I implement my own $(document).ready functionality without using jQuery?

Hello @kartik,  There are three options: If script is the last ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
637 views
0 votes
1 answer

Download File Using JavaScript/jQuery

Download Files Create a DOMString that contains the ...READ MORE

answered Jun 10 in JQuery by gaurav
• 12,420 points
19 views
0 votes
1 answer

What is the difference between AJAX with JavaScript and jQuery?

JavaScript is a programming language. JQuery is ...READ MORE

answered May 30 in JQuery by gaurav
• 12,420 points
19 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP