web-dev-qa-db-fra.com

Comment télécharger un fichier à partir du serveur à l'aide de jQuery AJAX et Spring MVC 3

Je veux implémenter le téléchargement (avec AJAX) du fichier téléchargé depuis le serveur. Côté serveur j'ai écrit le 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 montre la réponse:

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. ***

Comment gérer et forcer le navigateur à télécharger un fichier à l'aide de jQuery?

jqueryspring-mvcdownload
14
Tural

Deux options sont généralement utilisées, mais aucune n'implique Ajax. Et jQuery ne sera pas d'une grande aide non plus:

Option 1: IFrame

Placez un IFrame invisible dans votre page:

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

Lorsque le téléchargement doit commencer (vous n'avez pas mentionné comment il est déclenché), utilisez Javascript (et éventuellement jQuery) pour définir l'URL de l'IFrame, qui ressemble à /getInvoice/approvalId/123 dans ton cas:

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

La définition de l'URL IFrame devrait déclencher le navigateur pour présenter la boîte de dialogue de téléchargement.

Option 2: accédez à l'URL de téléchargement

La deuxième option est encore plus simple. Accédez simplement à l'URL de téléchargement. Une fois que le navigateur a découvert qu'il s'agit d'un type MIME qui ne peut pas être affiché, il présente une boîte de dialogue de téléchargement.

Ainsi, lorsque le téléchargement est déclenché, exécutez le code Javascript suivant:

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

Remarque:

Je ne sais pas si tous les navigateurs présenteront de manière fiable une boîte de dialogue de téléchargement avec les fichiers PDF. Certains navigateurs peuvent essayer de l'afficher dans le navigateur lui-même. Le contenu l'en-tête de disposition est utile mais sans garantie.

33
Codo

réponse jQuery-ized par Codo :

 $ ('# downloadFrame'). remove (); // Cela ne devrait pas échouer si le cadre n'existe pas 
 $ ('Body'). Append ('<iframe id = "downloadFrame" style = "display: none"> </iframe>'); 
 $ ('# downloadFrame'). attr ('src', '/ downloadUrlGoesHere');
4
nidalpres

Peut-être qu'une meilleure stratégie serait d'utiliser jQuery pour construire un nouveau lien <A> sur la page qui référencera cette même URL et insérer ce nouvel élément à un endroit approprié dans le DOM. Cela fait, peut-être que jQuery peut même cliquer dessus pour l'utilisateur, initiant le téléchargement.

2
Peter Gutowski