Télécharger textarea contenu d'un fichier à l'aide de Javascript (pas de serveur-côté)

Je me demande de faire un bouton "télécharger" qui télécharge le contenu d'un textarea sur la même page dans un fichier, avec le navigateur "Enregistrer sous" boîte de dialogue montrant vers le haut. Copier/coller pour faire le travail très bien, mais c'est une "exigence".

Maintenant, je suis en train de poster le contenu du textarea pour le serveur, ce qui les échos de retour avec Content-disposition: attachment giflé sur. Est-il un moyen de le faire avec Javascript côté client?

InformationsquelleAutor Thilo | 2009-03-04
  1. 22

    C'est peut être ce que vous cherchez:
    http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

    Il utilise le navigateur de dialogue de téléchargement, mais prend en charge uniquement les FF et Chrome, et peut-être de plus en plus de navigateurs maintenant?

    Edit:

    A fait observer que je vais intégrer le code de l'article:

    function saveTextAsFile()
{
    var textToWrite = //Your text input;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = //Your filename;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        //Chrome allows the link to be clicked
        //without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        //Firefox requires the link to be added to the DOM
        //before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}
    • Tandis que ceci peut théoriquement répondre à la question, il serait préférable pour inclure l'essentiel des éléments de réponse ici, et de fournir le lien de référence.
    • surtout depuis que WordPress est bloqué en Chine ...
    • Aujourd'hui, il n'est pas nécessaire de vérifier webkitURL. caniuse.com/#search=URL il Semble également que le Bord n'est pas encore en charge cette fonctionnalité
    InformationsquelleAutor NatureShade
  2. 9

    Vous pouvez essayer de window.location = "data:application/octet-stream,"+text mais qui ne fournit pas un mécanisme à travers lequel vous pouvez suggérer un nom, et aussi IE a une très petite cap sur la longueur maximale des données URI qui pourrait être un problème.

    InformationsquelleAutor olliej
  3. 7

    Il y avait certaines bibliothèques javascript qui fait ce genre de chose, par l'intermédiaire de petites fichier SWF intégré. Par exemple cette une.

    • Il s'agit plus d'une réponse à la question, à mon avis. Je veux dire, il m'a aidé et merci pour ça 🙂
    • Il existe d'autres bibliothèques comme celle-ci?
    InformationsquelleAutor yacoob
  4. 5

    J'ai trouvé une solution ici : http://www.codingforums.com/archive/index.php/t-181561.html

    My text area:<br />
<textarea rows='10' cols='80' id='myTextArea' ></textarea>

<br /><br />

Download button: <br />
<input value='download' type='button'
onclick='doDL(document.getElementById("myTextArea").value)' />


<script type='text/javascript'>
function doDL(s){
    function dataUrl(data) {return "data:x-application/text," + escape(data);}
    window.open(dataUrl(s));
}
</script>

    Espère que ça va aider.

    • vous utilisez une défaillance de type de contenu; n'a pas d'application/octet-stream ont le même effet?
    • génial la réponse que vous avez posté ici.... savez-vous si il y a un moyen de coder en dur un nom de fichier afin de l'enregistrer dialoge s'ouvre avec un nom de fichier, l'utilisateur peut le modifier, mais ce qui est par exemple, la date actuelle -- yyyymmdd.txt ?
    • voir ma réponse ci-dessous, basé sur celui-ci.
    InformationsquelleAutor Cyrlop
  5. 4

    Tout à fait possible à l'aide de cette croix navigateur JavaScript mise en œuvre de l'HTML5 saveAs fonction: https://github.com/koffsyrup/FileSaver.js

    Si tout ce que vous voulez faire est de sauvegarder le texte, le script ci-dessus fonctionne dans tous les navigateurs(y compris toutes les versions d'IE), pas de SWF nécessaire.

    InformationsquelleAutor superphonic
  6. 1

    Il pourrait sera possible que par la création d'un cadre, d'écrire là, puis de l'appel d'
    document.execCommand('saveas', ...) dans IE et quelque chose avec nsIFilePicker dans Mozilla, mais je crois que aurait besoin d'un peu extraordinaire privilèges (comme faisant partie du navigateur lui-même).

    • En effet Possible et ne nécessite aucun privilège spécial.. voir ici: jsfiddle.net/YhdSC/1 (c'est à dire seulement si :/)
    • Oui, le privilège était plus à propos de Firefox.
    InformationsquelleAutor Andrey Shchekin
  7. 1

    Basé sur @Cyrlop la réponse de https://stackoverflow.com/a/41948732/3096687, ce qui donne un moyen de spécifier un nom de fichier:

                function doDownload(str) {
              function dataUrl(data) {
                return "data:x-application/xml;charset=utf-8," + escape(data);
              }
              var downloadLink = document.createElement("a");
              downloadLink.href = dataUrl(str);
              downloadLink.download = "foo.xml";

              document.body.appendChild(downloadLink);
              downloadLink.click();
              document.body.removeChild(downloadLink);
            }

    @Superphonic la solution est probablement mieux si vous n'avez pas l'esprit, y compris plus d'octets dans votre JavaScript.

    InformationsquelleAutor bbarker
  8. 0

    Réponse courte: il n'est pas possible.
    Vous devez POSTER pour le serveur, et la réponse du serveur peut être "Content-disposition: attachment".

    InformationsquelleAutor firem