web-dev-qa-db-fra.com

Javascript: téléchargez des données dans un fichier à partir du contenu de la page

est le suivant: J'ai une page d'accueil où j'affiche un diagramme qui a été construit en utilisant des valeurs séparées par des virgules à l'intérieur de la page. Je voudrais donner aux utilisateurs la possibilité de télécharger les données sous forme de fichier cvs sans contacter à nouveau le serveur. (car les données sont déjà là) Est-ce possible? Je préférerais une solution JavaScript pure.

Jusqu'à présent, j'ai découvert: http://pixelgraphics.us/downloadify/test.html mais cela implique un flash que j'aimerais éviter.

Je ne peux pas imaginer que cette question n'a pas été posée auparavant. Je suis désolé de doubler le post, mais il semble que j'aie utilisé les mauvais mots-clés ou quelque chose - je n'ai pas trouvé de solution dans ces forums.

javascriptfiledownloadlocal
22
Simon

Mise à jour :

Le temps change certainement les choses ;-) Quand j'ai répondu pour la première fois à cette question IE8 était le dernier IE navigateur disponible (Nov 2010 ) et il n'y avait donc pas de moyen multi-navigateur pour y parvenir sans aller-retour vers le serveur, ou en utilisant un outil nécessitant Flash.

@ la réponse de Zectburno vous fournira ce dont vous avez besoin maintenant, mais pour le contexte historique, sachez quels IE navigateurs supportent quelle fonctionnalité.

  • btoa () n'est pas défini dans IE8 et IE9
  • Blob est disponible dans IE10 +

Assurez-vous de tester dans les navigateurs que vous devez prendre en charge. Même si l'exemple Blob dans l'autre réponse devrait fonctionner dans IE10 +, cela ne fonctionne pas pour moi en cliquant simplement sur le lien (le navigateur ne fait rien, aucune erreur) ... uniquement si je clique avec le bouton droit et enregistre la cible en tant que "fichier.csv", puis accédez au fichier et double-cliquez dessus pour l'ouvrir.

Testez les deux approches (btoa/Blob) dans ce JSFiddle. (voici le code)

<!doctype html>
<html>
<head>
</head>
<body>
  <a id="a" target="_blank">Download CSV (via btoa)</a>
  <script>
    var csv = "a,b,c\n1,2,3\n";
    var a = document.getElementById("a");
    a.href = "data:text/csv;base64," + btoa(csv);
  </script>
  <hr/>
  <a id="a2" download="Download.csv" type="text/csv">Download CSV (via Blob)</a>
  <script>
    var csv = "a,b,c\n1,2,3\n";
    var data = new Blob([csv]);
    var a2 = document.getElementById("a2");
    a2.href = URL.createObjectURL(data);
  </script>
</body>
</html>

Réponse originale :

Je ne pense pas qu'il existe une option disponible pour cela.

Je voudrais juste ajuster votre code de sorte que si Flash 10+ est détecté ( saturation de 93% en septembre 2009 ) sur le système de l'utilisateur, fournissez l'option Downloadify, sinon revenez à une demande côté serveur.

8
scunliffe

Testé sur Safari 5, Firefox 6, Opera 12, Chrome 26.

<a id='a'>Download CSV</a>
<script>
    var csv = 'a,b,c\n1,2,3\n';
    var a = document.getElementById('a');
    a.href='data:text/csv;base64,' + btoa(csv);
</script>

HTML5

<a id='a' download='Download.csv' type='text/csv'>Download CSV</a>
<script>
    var csv = 'a,b,c\n1,2,3\n';
    var data = new Blob([csv]);
    var a = document.getElementById('a');
    a.href = URL.createObjectURL(data);
</script>
28
Zectbumo

Solution simple:

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

tilisation

download("csv_data_here", "filename.csv", "text/csv");
18
Yassir Ennazk
function export(exportAs) {
    var csvText = tableRowsToCSV(this.headTable.rows);­
    csvText += tableRowsToCSV(this.bodyTable.rows);­
    //open the iframe doc for writing
    var expIFrame;
    if (strBrowser == "MSIE") expIFrame = document.exportiframe;
    else expIFrame = window.framesexportiframe;
    var doc = expIFrame.document;
    doc.open('text/plain', 'replace');
    doc.charset = "utf-8";
    doc.write(csvText);
    doc.close();
    var fileName = exportAs + ".txt";
    doc.execCommand("SaveAs", null, fileName);
}

function tableRowsToCSV(theRows) {
    var csv = "";
    var csvRow = "";
    var theCells;
    var cellData = "";
    for (var r = 0; r < theRows.length; r++) {
        theCells = theRows.item(r).cells;
        for (var c = 0; c < theCells.length; c++) {
            cellData = "";
            cellData = theCells.item(c).innerText;
            if (cellData.indexOf(",") != -1) cellData = "'" + cellData + "'";
            if (cellData != "") csvRow += "," + cellData;
        }
        if (csvRow != "") csvRow = csvRow.substring(1, csvRow.length);­
        csv += csvRow + "\n";
        csvRow = "";
    }
    return csv;
}

J'ai trouvé ce code ailleurs, ici , précédemment

3
Blowsie

Pour autant que je sache, ce n'est pas possible: c'est pourquoi Downloadify a été créé.

Vous pouvez essayer de créer un lien vers un data:URL contenant des données CSV, mais il y aura des problèmes entre les navigateurs.

3
Pekka

Si vos utilisateurs ont des navigateurs à jour, le nouvel objet Blob pourrait vous aider.

Sur la base de l'exemple ici https://developer.mozilla.org/en/docs/DOM/Blob ("Exemple d'utilisation du constructeur Blob"), vous pouvez faire quelque chose comme ceci:

var typedArray = "123,abc,456"; //your csv as a string
var blob = new Blob([typedArray], {type: "text/csv"});
var url = URL.createObjectURL(blob);
var a = document.querySelector("#linktocsv"); // the id of the <a> element where you will render the download link
a.href = url;
a.download = "file.csv";
2
Joe Sarre

La solution la plus complète que j'ai rencontrée utilise FileSaver.js , gérant de nombreux problèmes potentiels entre les navigateurs avec des solutions de secours.

Il tire parti de l'objet Blob comme l'ont fait d'autres affiches, et le créateur crée même un Blob.js polyfill au cas où vous en auriez besoin pour prendre en charge les versions de navigateur qui ne prennent pas en charge Blob

2
Andrew Ho

HTML:

<a href="javascript:onDownload();">Download</a>

JavaScript:

function onDownload() {
    document.location = 'data:Application/octet-stream,' +
                         encodeURIComponent(dataToDownload);
}

Tiré de Comment télécharger des données en tant que fichier à partir de JavaScript

0
Sneg