Télécharger le fichier de l'Ajax (en quelque sorte)

J'ai cet appel ajax dans mon GSP:

$.ajax({
    url: '${request.contextPath + '/Ticket/passAll'}',
    type: 'POST',
    data: data,
    success: function() {
        alert("Success");
    }
});

C'est le bloc de code de mon action de contrôleur:

response.setHeader("Content-disposition", "attachment; filename=sample.csv")
response.contentType = "application/vnd.ms-excel"

def outs = response.outputStream
def cols = [:]

tickets.each() {
    outs << it.ticketNo + ";" + it.subject
    outs << "\n"
}

outs.flush()
outs.close()

- Je obtenir la liste des tickets à partir de données que je passe de la vue via $.Ajax méthode. Que j'format de données au format CSV et que je veux l'exportation de données en tant que fichier CSV mais rien ne se passe. Les données sont envoyer au client, mais il n'existe pas de fichier à télécharger comme content-disposition n'est pas bien formé. Ce qui me manque?
J'ai essayé de faire quelque chose comme:

$.ajax({
    url: '${request.contextPath + '/Ticket/passAll'}',
    type: 'POST',
    data: aoData,
    dataType: 'text',
    success: function(result) {
        var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(result);
        window.open(uri, 'tiketi.csv');
    }
});

et au contrôleur-je générer de la plaine de la chaîne, mais de cette façon, j'obtiens un fichier sans l'extension qui est inacceptable.

Comment puis-je y parvenir? Merci.

Je te suggère plutôt de créer un iframe masqué/la forme et l'affichage à elle, de cette façon quand votre serveur renvoie le csv, le téléchargement va commencer comme d'habitude.

OriginalL'auteur drago | 2013-01-16

  1. 14

    Vous n'avez pas besoin de le faire via ajax. La page ne sera pas de redirection pour les téléchargements de fichiers.

    Je vote pour celle-ci 1000 fois si je le pouvais.
    de la fenêtre.emplacement.href = "/ControllerName/DownloadAsCSV?json=" + jsonStr; a fait le tour pour moi

    OriginalL'auteur James Kleeh

  2. 6

    Je suppose que la propriété de l'url doit être fixé comme vos citations sont entrés en collision.

    Essayer avec:

    $.ajax({
    url: "${request.contextPath}/Ticket/passAll",
    type: 'POST',
    data: aoData,
    dataType: 'text',
    success: function(result) {
        var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(result);
        window.open(uri, 'tiketi.csv');
    }
});
    De toute façon, je suis d'accord avec James Kleeh et Gregg, il n'y a pas vraiment besoin de le faire via l'appel ajax.
    Pourquoi mon nom de fichier n'est pas tiketi.csv mais un nom aléatoire?
    faisait partie de la question posée, vous ne savez pas ce que vous demandez ici?

    OriginalL'auteur lucke84

  3. 6

    Autant que je sache, il n'est pas possible de déclencher fichier-téléchargements via AJAX.
    Au lieu de cela vous pouvez faire quelque chose comme ceci (par exemple avec jQuery):

    function downloadComplete(){ hideSpinner();}
function downloadStart(){ showSpinner();}

function download(){
    downloadStart()
    var urlParams = data //or e.g. $(form).serialize() 
    var downloadUrl = "${request.contextPath}/Ticket/passAll?" + urlParams 
    $("#download-iframe").remove()
    $('<iframe style="display:none" id="download-iframe" src="' + downloadUrl + '" onreadystatechange="downloadComplete()" onload="downloadComplete()">').appendTo('body');
}

    Vous pouvez avoir des problèmes parce que c'est une demande: "de sécurité" ou trop d'arguments.
    Mais en normal, il devrait y avoir aucun problème.

    Pouvez-vous vérifier que cela fonctionne? J'aime cette réponse, mais que suis-je censé faire pour faire de la toupie s'en aller? Droit maintenant, le compteur affiche et le fichier se télécharge, mais c'est tout. Spinner reste sur l'écran.

    OriginalL'auteur Martin L.

  4. 0

    Je suis un peu en retard sur celui-ci, mais trébuché sur elle de faire de la recherche. Cette solution est un peu plus longue et bricolé à partir de diverses questions répondues ici. Je pense que c'est une réponse directe à cette question et j'ai travailler dans une application.

    <script>
function getCSV() {
console.log("in get csv");
$.ajax({
url: "<url string>",
dataType: 'json',
type: "post",
data: {},
success: function (data) {
console.log(data);
downloadCSV({filename: "<filename.csv", data: data.<array from 
backend call>});
},
error: function () {
}
});
}
}
function downloadCSV(args) {
var data, filename, link;
var csv = convertArrayOfObjectsToCSV({
data: args.data
});
if (csv == null) return;
filename = args.filename || 'export.csv';
if (!csv.match(/^data:text\/csv/i)) {
csv = 'data:text/csv;charset=utf-8,' + csv;
}
data = encodeURI(csv);
link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
link.click();
}
function convertArrayOfObjectsToCSV(args) {
var result, ctr, keys, columnDelimiter, lineDelimiter, data;
data = args.data || null;
if (data == null || !data.length) {
return null;
}
columnDelimiter = args.columnDelimiter || ',';
lineDelimiter = args.lineDelimiter || '\n';
keys = Object.keys(data[0]);
result = '';
result += keys.join(columnDelimiter);
result += lineDelimiter;
data.forEach(function (item) {
ctr = 0;
keys.forEach(function (key) {
if (ctr > 0) result += columnDelimiter;
result += item[key];
ctr++;
});
result += lineDelimiter;
});
return result;
}
</script>

    La première fonction est un standard de l'appel ajax pour obtenir le tableau de données à partir d'un backend d'appel. La prochaine étape est de créer le fichier csv. La deuxième ligne appelle une troisième fonction que le format du fichier csv. La deuxième fonction se déplace sur à partir du fichier csv création de et enfin crée un lien dynamique qui est ajouté au dom et cliqué pour le téléchargement. Semble la plus chemin de ronde, mais fonctionne avec la norme appel ajax vers le serveur cible.

    OriginalL'auteur sixstring