web-dev-qa-db-fra.com

Télécharger le fichier via jquery ajax post

J'essaie d'exporter les données de ma page Web et de les télécharger en tant que fichier Excel. mais le téléchargement ne commence pas, même si le retour de la réponse a abouti.

$.ajax({
      type: "POST",
      url: _url,
      contentType: 'multipart/form-data;boundary=SzB12x',
      data: json,
    });

Le responseText ressemble à ceci:

PK J; F? Xl/theme/theme1.xml YOo 6 , [r n; v i # - kJH: oC {0X7�2 mZ���d��u@�(٦b:M���� {| ^ 0t @ * "w $ ! 0I [՚ n i ' iH g, | J?!? HRh h ? R & L ߶ S v @ ? # ׮ ? "} Жt% hR t" + ? u {ނ 0 K oy 9OT WywkAͯ F 6 * [ U

Je pense que c'est le fichier mais je ne peux pas le télécharger!

Toute aide s'il vous plaît?

Merci!

javascriptjqueryajaxmultipartform-data
8
أسامة حمدان

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éé à la volée et renvoyé en réponse au client.

Code: 

$("#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. 

Ici, nous devons définir soigneusement quelques éléments côté serveur. J'ai mis 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.

12
Naren Yellavula

Essayez d'utiliser un formulaire masqué pour soumettre la demande.

Lorsqu'un utilisateur soumet un formulaire HTML, toutes les données saisies dans le formulaire par l'utilisateur sont envoyées sous forme de requête GET ou POST à l'URL spécifiée dans l'attribut «ACTION» de FORM.

 <FORM action="http://www.labnol.org/sendmail.php" method="post">
 ...form contents...
 </FORM>

Dans l'exemple ci-dessus, une demande HTTP POST est envoyée au script sendmail.php lors de la soumission du formulaire. Vous pouvez ajouter target = ”_ blank” à la balise FORM pour traiter la demande dans une nouvelle fenêtre.

Toutefois, si vous souhaitez envoyer un FORMULAIRE sur la page en arrière-plan sans diriger le navigateur vers une autre page (document.location.href change lors de l'envoi du formulaire), vous avez deux options:

Option 1. Vous pouvez créer un IFRAME invisible dans votre page HTML et le définir comme cible pour le FORMULAIRE original. Cela soumettra le formulaire mais sans recharger la fenêtre parente.

<FORM action="http://example.com/script.php" 
           method="POST" target="hidden-form">
 ...form contents... 
 </FORM>
<IFRAME style="display:none" name="hidden-form"></IFRAME>

Option n ° 2: une autre méthode vous permet de créer des charges personnalisées avant de soumettre le formulaire. Contrairement à la soumission de formulaire basée sur IFRAME, le code suivant crée une demande de soumission de formulaire standard. Par conséquent, l'emplacement de votre navigateur change et la page actuelle est ajoutée à l'historique du navigateur. Crédit: Rakesh Pai.

submitFORM('http://example.com/script.php', 'POST',
    {'name':'digital+inspiration', 'age':'100', 'sex','M'});

function submitFORM(path, params, method) {
    method = method || "post"; 

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    //Move the submit function to another variable
    //so that it doesn't get overwritten.
    form._submit_function_ = form.submit;

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form._submit_function_();
}

Dans this _ link, vous pouvez trouver le moyen de créer un formulaire masqué et de le soumettre.

prendre plaisir!!

5
mohammad

Approche ici directement levée de https://Gist.github.com/DavidMah/3533415

Cette approche utilise <form> et ajoute les données avec une clé. Cette approche fonctionne si le serveur attend déjà les données en tant qu'attribut du corps de la demande, par opposition au corps de la demande lui-même. Si les données à télécharger sont un objet, vous pouvez effectuer une itération sur les clés de cet objet. Si les données à télécharger sont un tableau, modifiez la route du serveur ou [ajoutez une idée ici].

dans le navigateur

// Takes a URL, param name, and data string
// Sends to the server.. The server can respond with binary data to download
jQuery.download = function(url, key, data){
    // Build a form
    var form = $('<form></form>').attr('action', url).attr('method', 'post');
    // Add the one key/value
    form.append($("<input></input>").attr('type', 'hidden').attr('name', key).attr('value', data));
    //send request
    form.appendTo('body').submit().remove();
};

Sur le serveur

# A Tidbit of sinatra code to respond
# Assume url is a set variable
# Assume 'key' is the key of the value used in the javascript

post url do
  data = params[:key]
  puts request.body.read
  headers['Content-Type'] = "application/octet-stream"

  body(data)
end

Exemple

$.download('/path/resource/, 'data', JSON.stringify(data))
2
prototype

Si vous souhaitez simplement télécharger un fichier, vous n'avez pas besoin d'utiliser ajax pour le faire. En fait, vous ne pouvez pas télécharger le fichier en utilisant ajax.
Vous pouvez toujours le faire en effectuant une demande de lien hypertexte <a href="your_link">Export</a> vers une page de serveur indiquant que réponses content-type est application/vnd.ms-Excel et content-disposition est attachment.

1
Cà phê đen