Javascript: Télécharger des fichiers de données de contenu à l'intérieur de la page

réglage est le suivant:
J'ai une page d'accueil où je l'affichage d'un diagramme qui a été construit à l'aide de séparation par virgule valeurs à partir de l'intérieur de la page. J'aimerais donner aux utilisateurs la possibilité de télécharger les données cvs-fichier sans avoir à contacter le serveur de nouveau. (comme les données sont déjà là)
Est-ce possible en quelque sorte? Je préfère un pur JavaScript solution.

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

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

InformationsquelleAutor Simon | 2010-11-15
  1. 8

    Mise à jour:

    Certainement change les choses 😉 Quand j'ai répondu à cette question IE8 a été le dernier navigateur IE disponibles (Nov 2010) et il n'y a donc pas de croix-navigateur de façon à atteindre cet objectif sans un aller-retour vers le serveur, ou à l'aide d'un outil nécessitant Flash.

    @Zectburno réponse vous obtiendrez ce dont vous avez besoin maintenant, mais pour le contexte historique, être conscient de qui IE navigateurs prennent en charge la fonctionnalité.

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

    Veillez à tester dans les navigateurs vous avez besoin de soutien. Même si la Goutte exemple dans l'autre réponse doit travailler dans IE10+, il ne fonctionne pas pour moi tout simplement en cliquant sur le lien (le navigateur ne fait rien, pas d'erreur)... seulement si je clic droit et enregistrer la cible sous "fichier.csv", puis naviguez jusqu'au fichier et double-cliquez dessus puis-je ouvrir le fichier.

    Tester 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 À Cette Question:

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

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

    • Peut dowloadify être invoqué à partir de javascript? Il serait difficile de créer un bouton flash pour s'adapter à mon design.
    • oui, il peut être invoqué par JavaScript: github.com/dcneiner/Downloadify
    • A ne pas voir comment est-ce une réponse à ma question. J'ai lu la "documentation", mais ma question était de savoir si le téléchargement peut être déclenché à partir de javascript. C'est malheureusement impossible - le Downloadify bouton doit être cliqué.
    • Le clic est nécessaire, mais downloadify ne l'est pas!
    InformationsquelleAutor scunliffe
  2. 28

    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>
    • C'est ce que j'utilise, cependant, dans Mozzila Firefox, il provoque d'horribles laggs pour les gros fichiers (>6 MO).
    • Si l'URL est trop gros, alors que le téléchargement ne parviennent tout simplement pas dans google Chrome.
    • Il serait utile d'entendre ce que vous entendez par "trop grosse". Combien de MO cherchez-vous à télécharger? Vous pourriez avoir besoin d'utiliser le HTML 5 de la méthode depuis l'ancienne méthode ne peut gérer ~4 ko en fonction du navigateur.
    InformationsquelleAutor Zectbumo
  3. 17

    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();
}

    Utilisation

    download("csv_data_here", "filename.csv", "text/csv");
    • 'application/octet-stream' a été la clé pour moi :+1:
    InformationsquelleAutor Yassir Ennazk
  4. 3

    Autant que je sache, ce n'est pas possible: C'est pourquoi Downloadify a été créé.

    Vous pouvez essayer de la relier à un données:URL contenant des données au format CSV, mais il y aura de la croix-navigateur de la difficulté.

    InformationsquelleAutor Pekka 웃
  5. 3
    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

    • expIFrame = fenêtre.framesexportiframe; //il n'y a pas framesexportiframe propriété dans la fenêtre !
    InformationsquelleAutor Blowsie
  6. 2

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

    S'appuyant sur l'exemple ici https://developer.mozilla.org/en/docs/DOM/Blob ("Blob constructeur exemple d'utilisation"), vous pourriez faire quelque chose comme ce qui suit:

    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";
    InformationsquelleAutor Joe Sarre
  7. 2

    La solution la plus complète, j'ai couru à travers qui est à l'aide de FileSaver.js, la gestion de nombreux potentiels de la croix-problèmes de navigateur pour vous avec des issues.

    Il faut profiter de la Blob objet comme les autres affiches ont fait, et que le créateur crée même un Blob.js polyfill dans le cas où vous avez besoin de soutien versions de navigateurs qui ne supportent pas Blob

    InformationsquelleAutor Andrew Ho
  8. 0

    HTML:

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

    JavaScript:

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

    Prises de Comment faire pour Télécharger des Données d'un Fichier à Partir de JavaScript

    • C'est une solution simple, mais comme mentionné sur la source d'origine, il n'est pas encore connu de façon à donner le fichier à télécharger un nom. Si quelqu'un connait la solution à ce problème, il serait apprécié.
    InformationsquelleAutor Sneg