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,640 points
1,149 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
• 17,000 points

Related Questions In JQuery

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,640 points
208 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
• 7,040 points
58 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
• 7,040 points
40 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
• 7,040 points
31 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 Jun 21 in JQuery by rajatha
• 7,040 points
20 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,740 points
5,184 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,740 points
664 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,740 points
2,616 views
0 votes
1 answer

Download a file by jQuery.Ajax

Downloading files using AJAX method $("#FileDownloadBtn"). click(function () ...READ MORE

answered Jun 10 in JQuery by gaurav
• 17,000 points
137 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
• 17,000 points
247 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