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?
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!
We cannot download the file through Ajax, must use XMLHttpRequest.
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).
Two options are usually used but neither involves AJAX. And jQuery won't be a great help either.
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.
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";
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With