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

Question

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?

I would refer to this question: [stackoverflow.com/questions/2186562/… - includes a jQuery plugin to accomplish this — Adam
– Adam, Commented Jul 22, 2011 at 21:05

informatik01 · Accepted Answer · 2019-11-13 18:10:15Z

34

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.

edited Nov 13, 2019 at 18:10

informatik01

16.5k11 gold badges82 silver badges112 bronze badges

answered Jul 17, 2011 at 13:08

Codo

79.7k18 gold badges176 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tural Over a year ago

I decided to not return byte[] with @ResponseBody. Now I set responses header <pre> private void setPdfHeaders(HttpServletResponse response, String shortFileName, File file) { response.setContentType("application/pdf"); response.setHeader("Content-disposition", "attachment; filename=" + shortFileName); response.setHeader("Content-Length", String.valueOf(file.length())); }</pre> then write stream to response OutputStream and user option 2 recommended by you.

jomofrodo Over a year ago

I like the iframe option, but want to add a note. When serving your document from the server, you need to set the mime-type appropriately, or you won't get the correct browser dialog interaction. For instance, my back end was setting "text/plain" for .xlsx documents and no joy.

Community · Accepted Answer · 2017-05-23 12:09:08Z

4

jQuery-ized answer by Codo:

   $('#downloadFrame').remove(); // This shouldn't fail if frame doesn't exist
   $('body').append('<iframe id="downloadFrame" style="display:none"></iframe>');
   $('#downloadFrame').attr('src','/downloadUrlGoesHere');

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jan 18, 2015 at 3:34

nidalpres

3,8781 gold badge20 silver badges12 bronze badges

Comments

Peter Gutowski · Accepted Answer · 2011-07-17 11:57:02Z

2

Maybe a better strategy would be to use jQuery to build a new <A> link on the page that'll reference this same URL, and insert this new element at a appropriate place in the DOM. That being done, maybe jQuery can even then click it for the user, initiating the download.

answered Jul 17, 2011 at 11:57

Peter Gutowski

812 bronze badges

1 Comment

Matt K Over a year ago

Unfortunately for obvious security reasons you cannot programmatically click a link.

Collectives™ on Stack Overflow

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

3 Answers 3

Option 1: IFrame

Option 2: Navigate to the download URL

Note

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Option 1: IFrame

Option 2: Navigate to the download URL

Note

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related