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, 2022 in JQuery by Edureka
• 13,690 points
20,859 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, 2022 by gaurav
• 23,260 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, 2022 in JQuery by Edureka
• 13,690 points
2,995 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, 2022 in JQuery by rajatha
• 7,680 points
1,175 views
0 votes
1 answer

Ajax using JQuery in ASP .NET c#

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

answered Jun 15, 2022 in JQuery by rajatha
• 7,680 points
3,975 views
0 votes
1 answer

Abort Ajax requests using jQuery

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

answered Jun 16, 2022 in JQuery by rajatha
• 7,680 points
740 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, 2022 in JQuery by rajatha
• 7,680 points
1,822 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,880 points
7,913 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,880 points
1,679 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,880 points
4,216 views
0 votes
1 answer

Download a file by jQuery.Ajax

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

answered Jun 10, 2022 in JQuery by gaurav
• 23,260 points
3,149 views
0 votes
1 answer

Download File Using JavaScript/jQuery

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

answered Jun 10, 2022 in JQuery by gaurav
• 23,260 points
1,718 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP