1

I am trying to download pdf file through JavaScript / jQuery. My code is:

function ShouldGeneratePdf() {
            $.ajax({
                url: "/Report/EmployeeReport",
                type: 'POST',
                data: {
                    EmployeeId: $('#EmployeeId').val()
                },
                cache: false,
                async: false,
                success: function (data) {
                    debugger;
                    //Convert the Byte Data to BLOB object.
                    var blob = new Blob([data], { type: "application/pdf" });

                    //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", "testFile.pdf");
                        a.attr("href", link);
                        $("body").append(a);
                        a[0].click();
                        $("body").remove(a);
                    }
                },
                error: function () {
                    debugger;
                }
            });
        }

Above method does download the pdf but the downloaded file is empty. Any idea what i am doing wrong ? Any help would be much appreciated.

PS: PDF file also includes images.

Waleed Naveed
  • 2,293
  • 2
  • 29
  • 57

1 Answers1

2

After a very frustrating week trying to figure out how to solve this problem, I can suggest you to check this four basic points:

1.- Check if the Server's CORS policy is open to your site requests if you're using a subdomain or a completely different domain. This depends on your service type (mine was ASP.NET MVC).

2.- I had a conflict with my Web App and my Web API (since I didn't use ASP.NET Core from the very first time), so I couldn't use my fetch function normally, but if is not your case, try to use the fetch API from your client as suggested here because it can expect the blob type directly from the request (you can also try to use the Axios or the XMLHttpRequest approach).

3.- (MOST IMPORTANT) What finally worked for me was to convert to Base64 the file from the server BEFORE sending the response file and then decode it from the client with a function. Skipping this step only threw a blank PDF even when I could preview it from the Safari inspector and had a perfectly PDF response with all its bytes, but this wasn't enough for the browser to download it correctly; so try to encode it first.

4.- Finally remember to define the Data type and Content type that best suits your needs in your request. In my case:

...
dataType: 'text',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
success: function(response) {
...
benjamingranados
  • 438
  • 5
  • 15