How to Download and Open a PDF File Using Ajax?

Downloading and Opening a PDF File using Ajax

In web development, it is common to generate files dynamically and download them to the client. Handling file downloads using Ajax can be tricky, especially for file formats like PDFs. One common issue is downloading and opening a PDF file using Ajax calls.

Problem:

A user has an action class that generates a PDF and sets the appropriate content type. They are attempting to call this action through an Ajax call and open the downloaded PDF file in the browser. However, the Ajax call results in an error: "Your browser sent a request that this server could not understand."

Solution:

To resolve this issue and successfully download and open a PDF file using Ajax, follow these steps:

1. Generate the PDF file: In the action class, generate the PDF file using your preferred library and set the appropriate content type as you have already done.

2. Handle the Ajax call in JavaScript:

   • Use the XMLHttpRequest object to initiate an Ajax call to the action URL.
   • Set the request method to "POST" or "GET" according to your action method.

3. Process the server response:

   • In the success callback function of the Ajax call, handle the server's response.
   • Use the Blob API to create a new Blob representing the downloaded PDF data.
   • Create an anchor () element and set its href attribute to the Blob's object URL.
   • Set the download attribute to specify the desired filename for the PDF file.
   • Trigger the click event on the anchor element to initiate the download and open the PDF file.

<code class="javascript">$.ajax({
  url: '<URL_TO_FILE>',
  success: function(data) {
    var blob = new Blob([data]);
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = '<FILENAME_TO_SAVE_WITH_EXTENSION>';
    link.click();
  }
});</code>