Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to download file from server using jQuery AJAX and Spring MVC 3

I want to implement downloading (with AJAX) of uploaded file from server. On the server side I wrote the code

@RequestMapping(value = "/getInvoice/approvalId/{approvalId}", method = RequestMethod.GET)
public
@ResponseBody
byte[] getInvoice(@PathVariable("approvalId") Integer approvalId, HttpServletResponse response) throws IOException {
    String fileName = this.approvalService.getFullInvoicePath(approvalId);
    File file = new File(fileName);

    response.setContentType("application/octet-stream");
    response.setHeader("Content-Disposition", "attachment; filename=\"" + file.getName() + "\"");
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setContentLength((int) file.length());
    return FileUtils.readFileToByteArray(file);
}

Fiddler2 shows response:

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Disposition: attachment; filename="invoice.pdf"
Pragma: no-cache
Cache-Control: no-cache
Content-Type: application/octet-stream;charset=UTF-8
Content-Length: 1028351
Date: Sun, 17 Jul 2011 08:16:41 GMT

%PDF-1.4
%����
6 0 obj <</Linearized 1/L 1028351/O 8/E 1024254/N 1/T 1028185/H [ 5056 544]>>
endobj

xref
6 238 
*** FIDDLER: RawDisplay truncated at 128 characters. Right-click to disable truncation. ***

How to handle and force browser to download file using jQuery?

like image 953
Tural Avatar asked Jul 17 '11 08:07

Tural


People also ask

How to download file from server using jQuery?

In jQuery:$('a#someID'). attr({target: '_blank', href : 'http://localhost/directory/file.pdf'}); Whenever that link is clicked, it will download the file in a new tab/window. Nicely done!

Can we download file using Ajax?

We cannot download the file through Ajax, must use XMLHttpRequest.

How can I download Excel file using jQuery?

Downloading Excel File using AJAX in jQueryInside the DownloadFile JavaScript function, the URL of the File is passed as parameter to the jQuery AJAX function. Inside the jQuery AJAX function, using the XmlHttpRequest (XHR) call, the PDF file is downloaded as Byte Array (Binary Data).


1 Answers

Two options are usually used but neither involves AJAX. And jQuery won't be a great help either.

Option 1: IFrame

Place an invisible IFrame into your page:

<iframe id="downloadFrame" style="display:none"></iframe>

When the download should start (you didn't mention how it is triggered), use Javascript (and possibly jQuery) to set the URL for the IFrame, which is something like /getInvoice/approvalId/123 in your case:

var iframe = document.getElementById("downloadFrame");
iframe .src = "/getInvoice/approvalId/123";

Setting the IFrame URL should trigger the browser to present the download dialog.

Option 2: Navigate to the download URL

The second option is even simpler. Just navigate to the download URL. Once the browser figures out it's a MIME type that cannot be displayed, it will present a download dialog.

So when the download is triggered, execute the following JavaScript code:

window.location.href = "/getInvoice/approvalId/123";

Note

I'm not sure if all browser will reliably present a download dialog with PDF files. Some browsers might try to display it within the browser itself. The Content-Disposition HTTP header is helpful but no guarantee.

like image 136
Codo Avatar answered Sep 28 '22 01:09

Codo