Téléchargez un fichier de jQuery.Ajax
J'ai une action Struts2 sur le côté serveur pour le téléchargement de fichier.
<action name="download" class="com.xxx.DownAction">
<result name="success" type="stream">
<param name="contentType">text/plain</param>
<param name="inputName">imageStream</param>
<param name="contentDisposition">attachment;filename={fileName}</param>
<param name="bufferSize">1024</param>
</result>
</action>
Cependant, lorsque j'appelle l'action à l'aide de jQuery:
$.post(
"/download.action",{
para1:value1,
para2:value2
....
},function(data){
console.info(data);
}
);
dans Firebug, je vois que les données sont récupérées avec le flux binaire. Je me demande comment ouvrir le fenêtre de téléchargement de fichier avec lequel l'utilisateur peut enregistrer le fichier localement?
Mise à jour des navigateurs modernes 2019
C'est l'approche que je recommanderais maintenant avec quelques mises en garde:
- Un navigateur relativement moderne est requis
- Si le fichier est censé être très volumineux , vous devriez probablement faire quelque chose de similaire à l'approche initiale (iframe et cookie), car certaines des opérations ci-dessous risquent de se produire. consommez autant de mémoire système que le fichier en cours de téléchargement et/ou d’autres effets intéressants sur le processeur.
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
// the filename you want
a.download = 'todo-1.json';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
alert('your file has downloaded!'); // or you know, something with better UX...
})
.catch(() => alert('oh no!'));2012 Approche originale basée sur jQuery/iframe/Cookie
Bluish a tout à fait raison, vous ne pouvez pas le faire via Ajax car JavaScript ne peut pas enregistrer les fichiers directement sur l'ordinateur de l'utilisateur (pour des raisons de sécurité). Malheureusement, le fait de pointer l'URL fenêtre principale sur votre téléchargement de fichier signifie que vous avez peu de contrôle sur l'expérience de l'utilisateur lorsqu'un téléchargement de fichier a lieu.
J'ai créé jQuery File Download , ce qui permet une expérience similaire à Ajax avec le téléchargement de fichiers complet avec les rappels OnSuccess et OnFailure pour offrir une meilleure expérience utilisateur. Jetez un coup d’œil à mon billet de blog sur le problème courant que le plug-in résout et sur quelques façons de l’utiliser, ainsi qu’un démo de jQuery File Download en action . Voici le source
Voici une simple démonstration de cas d’utilisation utilisant le plugin source avec des promesses. La page de démonstration inclut de nombreux autres exemples, "meilleurs UX".
$.fileDownload('some/file.pdf')
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });
Selon les navigateurs que vous devez prendre en charge, vous pourrez peut-être utiliser https://github.com/eligrey/FileSaver.js/ , ce qui permet un contrôle plus explicite que la méthode IFRAME utilisée par jQuery File Download.
Personne n'a posté ceci (solution de Pekka @) ... donc je vais le poster. Cela peut aider quelqu'un.
Vous n'avez pas besoin de faire cela via Ajax. Juste utiliser
window.location="download.action?para1=value1...."
Vous pouvez avec HTML5
NB: Les données de fichier retournées DOIVENT être encodées en base64 car vous ne pouvez pas encoder en JSON des données binaires.
Dans ma réponse AJAX, j'ai une structure de données qui ressemble à ceci:
{
result: 'OK',
download: {
mimetype: string(mimetype in the form 'major/minor'),
filename: string(the name of the file to download),
data: base64(the binary data as base64 to download)
}
}
Cela signifie que je peux faire ce qui suit pour sauvegarder un fichier via AJAX
var a = document.createElement('a');
if (window.URL && window.Blob && ('download' in a) && window.atob) {
// Do it the HTML5 compliant way
var blob = base64ToBlob(result.download.data, result.download.mimetype);
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = result.download.filename;
a.click();
window.URL.revokeObjectURL(url);
}
La fonction base64ToBlob a été prise à partir de ici et doit être utilisée conformément à cette fonction
function base64ToBlob(base64, mimetype, slicesize) {
if (!window.atob || !window.Uint8Array) {
// The current browser doesn't have the atob function. Cannot continue
return null;
}
mimetype = mimetype || '';
slicesize = slicesize || 512;
var bytechars = atob(base64);
var bytearrays = [];
for (var offset = 0; offset < bytechars.length; offset += slicesize) {
var slice = bytechars.slice(offset, offset + slicesize);
var bytenums = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
bytenums[i] = slice.charCodeAt(i);
}
var bytearray = new Uint8Array(bytenums);
bytearrays[bytearrays.length] = bytearray;
}
return new Blob(bytearrays, {type: mimetype});
};
Cela est utile si votre serveur sauvegarde les données en mémoire à enregistrer. Cependant, je n'ai pas encore compris comment implémenter un repli HTML4
1. Framework agnostic: Servlet téléchargeant le fichier en pièce jointe
<!-- with JS -->
<a href="javascript:window.location='downloadServlet?param1=value1'">
download
</a>
<!-- without JS -->
<a href="downloadServlet?param1=value1" >download</a>
2. Struts2 Framework: Action téléchargeant un fichier en pièce jointe
<!-- with JS -->
<a href="javascript:window.location='downloadAction.action?param1=value1'">
download
</a>
<!-- without JS -->
<a href="downloadAction.action?param1=value1" >download</a>
Il serait préférable d'utiliser la balise <s:a> pointant avec OGNL vers une URL créée avec la balise <s:url>:
<!-- without JS, with Struts tags: THE RIGHT WAY -->
<s:url action="downloadAction.action" var="url">
<s:param name="param1">value1</s:param>
</s:ulr>
<s:a href="%{url}" >download</s:a>
Dans les cas ci-dessus, vous devez écrire l'en-tête Content-Disposition dans le réponse, en spécifiant que le fichier doit être téléchargé (attachment) et non ouvert par le navigateur (inline). Vous devez également spécifier - Type de conten, et vous souhaiterez peut-être ajouter le nom du fichier et sa longueur (pour aider le navigateur tracer une barre de progression réaliste).
Par exemple, lors du téléchargement d’un fichier Zip:
response.setContentType("application/Zip");
response.addHeader("Content-Disposition",
"attachment; filename=\"name of my file.Zip\"");
response.setHeader("Content-Length", myFile.length()); // or myByte[].length...
Avec Struts2 (à moins que vous n'utilisiez l'Action en tant que Servlet, un hack pour la diffusion directe , par exemple), vous n'avez pas besoin d'écrire directement dans la réponse. simplement en utilisant le type de résultat du flux et en le configurant dans struts.xml fonctionnera: EXEMPLE
<result name="success" type="stream">
<param name="contentType">application/Zip</param>
<param name="contentDisposition">attachment;filename="${fileName}"</param>
<param name="contentLength">${fileLength}</param>
</result>
3. Framework agnostic (/ Struts2 framework): Servlet (/ Action) ouvrant le fichier dans le navigateur
Si vous souhaitez ouvrir le fichier dans le navigateur au lieu de le télécharger, le paramètre Content-disposition doit être défini sur inline, mais la cible ne peut pas être la fenêtre en cours. emplacement; vous devez cibler une nouvelle fenêtre créée par javascript, un <iframe> dans la page ou une nouvelle fenêtre créée à la volée avec la cible "discussion" target = "_ blank":
<!-- From a parent page into an IFrame without javascript -->
<a href="downloadServlet?param1=value1" target="iFrameName">
download
</a>
<!-- In a new window without javascript -->
<a href="downloadServlet?param1=value1" target="_blank">
download
</a>
<!-- In a new window with javascript -->
<a href="javascript:window.open('downloadServlet?param1=value1');" >
download
</a>
J'ai créé peu de solution de contournement (inspirée du plugin @JohnCulviner):
// creates iframe and form in it with hidden field,
// then submit form with provided data
// url - form url
// data - data to form field
// input_name - form hidden input name
function ajax_download(url, data, input_name) {
var $iframe,
iframe_doc,
iframe_html;
if (($iframe = $('#download_iframe')).length === 0) {
$iframe = $("<iframe id='download_iframe'" +
" style='display: none' src='about:blank'></iframe>"
).appendTo("body");
}
iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
if (iframe_doc.document) {
iframe_doc = iframe_doc.document;
}
iframe_html = "<html><head></head><body><form method='POST' action='" +
url +"'>" +
"<input type=hidden name='" + input_name + "' value='" +
JSON.stringify(data) +"'/></form>" +
"</body></html>";
iframe_doc.open();
iframe_doc.write(iframe_html);
$(iframe_doc).find('form').submit();
}
Démo avec événement de clic:
$('#someid').on('click', function() {
ajax_download('/download.action', {'para1': 1, 'para2': 2}, 'dataname');
});
Le moyen simple de faire en sorte que le navigateur télécharge un fichier est de faire la demande comme ça:
function downloadFile(urlToSend) {
var req = new XMLHttpRequest();
req.open("GET", urlToSend, true);
req.responseType = "blob";
req.onload = function (event) {
var blob = req.response;
var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download=fileName;
link.click();
};
req.send();
}
Cela ouvre la fenêtre de téléchargement du navigateur.
Ok, basé sur le code de ndpu, voici une version améliorée (je pense) de ajax_download; -
function ajax_download(url, data) {
var $iframe,
iframe_doc,
iframe_html;
if (($iframe = $('#download_iframe')).length === 0) {
$iframe = $("<iframe id='download_iframe'" +
" style='display: none' src='about:blank'></iframe>"
).appendTo("body");
}
iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
if (iframe_doc.document) {
iframe_doc = iframe_doc.document;
}
iframe_html = "<html><head></head><body><form method='POST' action='" +
url +"'>"
Object.keys(data).forEach(function(key){
iframe_html += "<input type='hidden' name='"+key+"' value='"+data[key]+"'>";
});
iframe_html +="</form></body></html>";
iframe_doc.open();
iframe_doc.write(iframe_html);
$(iframe_doc).find('form').submit();
}
Utilisez ceci comme ceci; -
$('#someid').on('click', function() {
ajax_download('/download.action', {'para1': 1, 'para2': 2});
});
Les paramètres sont envoyés en tant que paramètres post appropriés, comme s'ils venaient d'une entrée plutôt que sous la forme d'une chaîne codée JSON, comme dans l'exemple précédent.
CAVEAT: Méfiez-vous du potentiel d’injection variable sur ces formes. Il pourrait y avoir un moyen plus sûr de coder ces variables. Vous pouvez également envisager de leur échapper.
J'ai fait face au même problème et l'ai résolu avec succès. Mon cas d'utilisation est le suivant.
"Publiez des données JSON sur le serveur et recevez un fichier Excel. Ce fichier Excel est créé par le serveur et renvoyé en réponse au client. Téléchargez cette réponse sous forme de fichier avec un nom personnalisé dans le navigateur"
$("#my-button").on("click", function(){
// Data to post
data = {
ids: [1, 2, 3, 4, 5]
};
// Use XMLHttpRequest instead of Jquery $ajax
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var a;
if (xhttp.readyState === 4 && xhttp.status === 200) {
// Trick for making downloadable link
a = document.createElement('a');
a.href = window.URL.createObjectURL(xhttp.response);
// Give filename you wish to download
a.download = "test-file.xls";
a.style.display = 'none';
document.body.appendChild(a);
a.click();
}
};
// Post data to URL which handles post request
xhttp.open("POST", excelDownloadUrl);
xhttp.setRequestHeader("Content-Type", "application/json");
// You should set responseType as blob for binary responses
xhttp.responseType = 'blob';
xhttp.send(JSON.stringify(data));
});
L'extrait ci-dessus ne fait que suivre
- Publication d'un tableau au format JSON sur le serveur à l'aide de XMLHttpRequest.
- Après avoir récupéré le contenu sous forme de blob (binaire), nous créons une URL téléchargeable et l'attachons à un lien "a" invisible, puis cliquez dessus. J'ai fait une demande POST ici. Au lieu de cela, vous pouvez aussi opter pour un simple GET. Nous ne pouvons pas télécharger le fichier via Ajax, nous devons utiliser XMLHttpRequest.
Ici, nous devons définir soigneusement quelques éléments côté serveur. J'ai défini quelques en-têtes dans Python Django HttpResponse. Vous devez les configurer en conséquence si vous utilisez d'autres langages de programmation.
# In python Django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
Depuis que je télécharge xls (Excel) ici, j’ai ajusté contentType à la valeur précédente. Vous devez le définir en fonction de votre type de fichier. Vous pouvez utiliser cette technique pour télécharger tout type de fichier.
Voici ce que j'ai fait, javascript pur et html. Je ne l'ai pas testé mais cela devrait fonctionner dans tous les navigateurs.
Fonction Javascript
var iframe = document.createElement('iframe');
iframe.id = "IFRAMEID";
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = 'SERVERURL'+'?' + $.param($scope.filtro);
iframe.addEventListener("load", function () {
console.log("FILE LOAD DONE.. Download should start now");
});
Utiliser uniquement des composants pris en charge par tous les navigateurs, pas de bibliothèques supplémentaires.
Voici mon côté serveur Java Code du contrôleur Spring.
@RequestMapping(value = "/rootto/my/xlsx", method = RequestMethod.GET)
public void downloadExcelFile(@RequestParam(value = "param1", required = false) String param1,
HttpServletRequest request, HttpServletResponse response)
throws ParseException {
Workbook wb = service.getWorkbook(param1);
if (wb != null) {
try {
String fileName = "myfile_" + sdf.format(new Date());
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
response.setHeader("Content-disposition", "attachment; filename=\"" + fileName + ".xlsx\"");
wb.write(response.getOutputStream());
response.getOutputStream().close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
function downloadURI(uri, name)
{
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
Dans Rails, je le fais comme suit:
function download_file(file_id) {
let url = '/files/' + file_id + '/download_file';
$.ajax({
type: 'GET',
url: url,
processData: false,
success: function (data) {
window.location = url;
},
error: function (xhr) {
console.log(' Error: >>>> ' + JSON.stringify(xhr));
}
});
}
L'astuce est la partie window.location. La méthode du contrôleur ressemble à:
# GET /files/{:id}/download_file/
def download_file
send_file(@file.file,
:disposition => 'attachment',
:url_based_filename => false)
end
Ajout de plus de choses à la réponse ci-dessus pour télécharger un fichier
Ci-dessous, quelques Java codes printaniers générant des octets Array
@RequestMapping(value = "/downloadReport", method = { RequestMethod.POST })
public ResponseEntity<byte[]> downloadReport(
@RequestBody final SomeObejct obj, HttpServletResponse response) throws Exception {
OutputStream out = new ByteArrayOutputStream();
// write something to output stream
HttpHeaders respHeaders = new HttpHeaders();
respHeaders.setContentType(MediaType.APPLICATION_OCTET_STREAM);
respHeaders.add("X-File-Name", name);
ByteArrayOutputStream bos = (ByteArrayOutputStream) out;
return new ResponseEntity<byte[]>(bos.toByteArray(), respHeaders, HttpStatus.CREATED);
}
Maintenant en code javascript en utilisant FileSaver.js, pouvez télécharger un fichier avec le code ci-dessous
var json=angular.toJson("somejsobject");
var url=apiEndPoint+'some url';
var xhr = new XMLHttpRequest();
//headers('X-File-Name')
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
var res = this.response;
var fileName=this.getResponseHeader('X-File-Name');
var data = new Blob([res]);
saveAs(data, fileName); //this from FileSaver.js
}
}
xhr.open('POST', url);
xhr.setRequestHeader('Authorization','Bearer ' + token);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'arraybuffer';
xhr.send(json);
Ce qui précède va télécharger le fichier
Ok, voici le code de travail lors de l'utilisation de MVC et vous obtenez votre fichier d'un contrôleur
disons que vous avez votre tableau d'octets déclarer et remplir, la seule chose à faire est d'utiliser la fonction File (en utilisant System.Web.Mvc)
byte[] bytes = .... insert your bytes in the array
return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet, "nameoffile.exe");
et ensuite, dans le même contrôleur, ajoutez ces 2 fonctions
protected override void OnResultExecuting(ResultExecutingContext context)
{
CheckAndHandleFileResult(context);
base.OnResultExecuting(context);
}
private const string FILE_DOWNLOAD_COOKIE_NAME = "fileDownload";
/// <summary>
/// If the current response is a FileResult (an MVC base class for files) then write a
/// cookie to inform jquery.fileDownload that a successful file download has occured
/// </summary>
/// <param name="context"></param>
private void CheckAndHandleFileResult(ResultExecutingContext context)
{
if (context.Result is FileResult)
//jquery.fileDownload uses this cookie to determine that a file download has completed successfully
Response.SetCookie(new HttpCookie(FILE_DOWNLOAD_COOKIE_NAME, "true") { Path = "/" });
else
//ensure that the cookie is removed in case someone did a file download without using jquery.fileDownload
if (Request.Cookies[FILE_DOWNLOAD_COOKIE_NAME] != null)
Response.Cookies[FILE_DOWNLOAD_COOKIE_NAME].Expires = DateTime.Now.AddYears(-1);
}
et ensuite vous pourrez appeler votre contrôleur pour télécharger et obtenir le rappel "succès" ou "échec"
$.fileDownload(mvcUrl('name of the controller'), {
httpMethod: 'POST',
successCallback: function (url) {
//insert success code
},
failCallback: function (html, url) {
//insert fail code
}
});
J'ai trouvé un correctif qui, s'il n'utilise pas réellement ajax, vous permet d'utiliser un appel javascript pour demander le téléchargement, puis d'obtenir un rappel lorsque le téléchargement commence réellement. J'ai trouvé cela utile si le lien exécute un script côté serveur qui prend un peu de temps pour composer le fichier avant de l'envoyer. afin que vous puissiez les alerter que le traitement est en cours, puis lorsqu'il envoie le fichier, supprimez cette notification de traitement. C'est pourquoi je voulais commencer par essayer de charger le fichier via ajax afin qu'un événement se produise lorsque le fichier est demandé et un autre lorsqu'il commence à se télécharger.
le js sur la première page
function expdone()
{
document.getElementById('exportdiv').style.display='none';
}
function expgo()
{
document.getElementById('exportdiv').style.display='block';
document.getElementById('exportif').src='test2.php?arguments=data';
}
l'iframe
<div id="exportdiv" style="display:none;">
<img src="loader.gif"><br><h1>Generating Report</h1>
<iframe id="exportif" src="" style="width: 1px;height: 1px; border:0px;"></iframe>
</div>
puis l'autre fichier:
<!DOCTYPE html>
<html>
<head>
<script>
function expdone()
{
window.parent.expdone();
}
</script>
</head>
<body>
<iframe id="exportif" src="<?php echo "http://10.192.37.211/npdtracker/exportthismonth.php?arguments=".$_GET["arguments"]; ?>"></iframe>
<script>document.getElementById('exportif').onload= expdone;</script>
</body></html>
Je pense qu'il y a un moyen de lire obtenir des données en utilisant js donc aucun php ne serait nécessaire. mais je ne le sais pas et le serveur que j'utilise prend en charge php, donc cela fonctionne pour moi. Je pensais le partager au cas où cela aiderait quelqu'un.
J'ai longtemps lutté avec ce problème. Enfin, une élégante bibliothèque externe a suggéré ici m'a aidé.
Il est certain que vous ne pouvez pas le faire via un appel Ajax.
Cependant, il existe une solution de contournement.
Pas :
Si vous utilisez form.submit () pour télécharger le fichier, vous pouvez procéder comme suit:
- Créez un appel ajax de client à serveur et stockez le flux de fichiers dans la session.
- En cas de "succès" renvoyé par le serveur, appelez votre form.submit () pour diffuser simplement le flux de fichiers stocké dans la session.
Ceci est utile dans le cas où vous voulez décider si un fichier doit être téléchargé après avoir créé form.submit (), par exemple: il peut y avoir un cas où sur form.submit (), une exception se produit du côté du serveur et En cas de blocage, vous devrez peut-être afficher un message personnalisé côté client. Dans ce cas, cette implémentation pourrait vous aider.
Utilisez window.openhttps://developer.mozilla.org/en-US/docs/Web/API/Window/open
Par exemple, vous pouvez placer cette ligne de code dans un gestionnaire de clics:
window.open('/file.txt', '_blank');
Il ouvrira un nouvel onglet (en raison du nom de fenêtre '_blank') et cet onglet ouvrira l'URL.
Votre code côté serveur devrait aussi avoir quelque chose comme ça:
res.set('Content-Disposition', 'attachment; filename=file.txt');
Et de cette façon, le navigateur devrait inviter l'utilisateur à enregistrer le fichier sur le disque, au lieu de simplement lui montrer le fichier. Il fermera également automatiquement l'onglet qu'il vient d'ouvrir.
il existe une autre solution pour télécharger une page Web en ajax. Mais je me réfère à une page qui doit d’abord être traitée puis téléchargée.
Vous devez d’abord séparer le traitement de la page du téléchargement des résultats.
1) Seuls les calculs de page sont effectués dans l'appel ajax.
$. post ("CalculusPage.php", {calculusFunction: true, ID: 29, data1: "a", data2: "b"},
fonction (data , statut)
{
if (status == "succès")
{
/* 2) Dans la réponse, la page qui utilise les calculs précédents est téléchargée . Par exemple, il peut s'agir d'une page imprimant les résultats d'une table calculée dans l'appel ajax. */
window.location.href = DownloadPage.php + "? ID =" + 29;
}
}
);
// Par exemple: dans CalculusPage.php
If (! Empty ($ _ POST ["calculusFunction"]))
{
$ ID = $ _POST ["ID"];
$ Query = "INSERT INTO ExamplePage (data1, data2) VALEURS ('". $ _ POST ["data1"]. "'," ". $ _POST ["data2"]. "') WHERE id =". $ ID;
...
}
// Par exemple: dans le DownloadPage.php
$ ID = $ _GET ["ID"];
$ Sede = "SELECT * FROM ExemplePage WHERE id =". $ ID;
...
$ filename = "Export_Data.xls";
en-tête ("Content-Type: application/vnd.ms-Excel");
en-tête ("Content-Disposition: inline; nomfichier = $ nomfichier");
...
J'espère que cette solution pourra être utile pour beaucoup, comme pour moi.
Si vous souhaitez utiliser le téléchargement de fichier jQuery, veuillez le noter pour IE. Vous devez réinitialiser la réponse ou elle ne sera pas téléchargée
//The IE will only work if you reset response
getServletResponse().reset();
//The jquery.fileDownload needs a cookie be set
getServletResponse().setHeader("Set-Cookie", "fileDownload=true; path=/");
//Do the reset of your action create InputStream and return
Votre action peut implémenter ServletResponseAware pour accéder à getServletResponse()