web-dev-qa-db-fra.com

Est-il possible d'écrire des données dans un fichier en utilisant uniquement JavaScript?

Je veux écrire des données dans un fichier existant en utilisant JavaScript. Je ne veux pas l'imprimer sur la console. Je veux réellement écrire des données sur abc.txt. J'ai lu beaucoup de questions à réponses, mais partout où ils impriment sur console. à un endroit donné, ils ont donné du code mais cela ne fonctionne pas. Alors, s'il vous plaît, quelqu'un peut-il m'aider à écrire des données dans File?.

J'ai référé le code mais ça ne marche pas: ça donne une erreur:

 Uncaught TypeError: Illegal constructor

sur chrome et

 SecurityError: The operation is insecure.

sur Mozilla

var f = "sometextfile.txt";

writeTextFile(f, "Spoon")
writeTextFile(f, "Cheese monkey")
writeTextFile(f, "Onion")

function writeTextFile(afilename, output)
{
  var txtFile =new File(afilename);
  txtFile.writeln(output);
  txtFile.close();
}

Donc, pouvons-nous réellement écrire des données dans un fichier en utilisant seulement Javascript ou PAS? S'il vous plaît, aidez-moi Merci d'avance

javascripthtmlhtml5
153
pareshm

Quelques suggestions pour cela -

  1. Si vous essayez d'écrire un fichier sur la machine cliente, vous ne pouvez le faire d'aucune manière sur plusieurs navigateurs. IE possède des méthodes pour permettre aux applications "de confiance" d'utiliser des objets ActiveX pour lire/écrire des fichiers.
  2. Si vous essayez de le sauvegarder sur votre serveur, transmettez simplement les données textuelles à votre serveur et exécutez le code d'écriture de fichier en utilisant un langage côté serveur.
  3. Pour stocker des informations extrêmement petites côté client, vous pouvez utiliser des cookies.
  4. Utilisation de l'API HTML5 pour le stockage local.
75
Sujit Agarwal

Vous pouvez créer des fichiers dans le navigateur en utilisant Blob et URL.createObjectURL . Tous les navigateurs récents support this .

Vous ne pouvez pas enregistrer directement le fichier que vous créez, car cela poserait de gros problèmes de sécurité, mais vous pouvez le fournir en tant que lien de téléchargement pour l'utilisateur. Vous pouvez suggérer un nom de fichier via le attribut download du lien, dans les navigateurs prenant en charge l’attribut download. Comme pour tout autre téléchargement, l'utilisateur téléchargeant le fichier aura le dernier mot sur le nom du fichier.

_var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    // returns a URL you can use as a href
    return textFile;
  };
_

Voici un exemple qui utilise cette technique pour enregistrer du texte arbitraire à partir de textarea.

Si vous souhaitez lancer immédiatement le téléchargement au lieu de demander à l'utilisateur de cliquer sur un lien, vous pouvez utiliser des événements de souris pour simuler un clic de souris sur le lien en tant que Lifecube 's answer = fait. J'ai créé un exemple mis à jour qui utilise cette technique.

_  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.createElement('a');
    link.setAttribute('download', 'info.txt');
    link.href = makeTextFile(textbox.value);
    document.body.appendChild(link);

    // wait for the link to be added to the document
    window.requestAnimationFrame(function () {
      var event = new MouseEvent('click');
      link.dispatchEvent(event);
      document.body.removeChild(link);
    });

  }, false);
_
181
Useless Code

Si vous parlez du javascript du navigateur, vous ne pouvez pas écrire de données directement dans un fichier local pour des raisons de sécurité. La nouvelle API HTML 5 ne peut vous permettre que de lire des fichiers.

Mais si vous voulez écrire des données, et permettre à l'utilisateur de télécharger en tant que fichier au niveau local. le code suivant fonctionne:

    function download(strData, strFileName, strMimeType) {
    var D = document,
        A = arguments,
        a = D.createElement("a"),
        d = A[0],
        n = A[1],
        t = A[2] || "text/plain";

    //build download link:
    a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);


    if (window.MSBlobBuilder) { // IE10
        var bb = new MSBlobBuilder();
        bb.append(strData);
        return navigator.msSaveBlob(bb, strFileName);
    } /* end if(window.MSBlobBuilder) */



    if ('download' in a) { //FF20, CH19
        a.setAttribute("download", n);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            var e = D.createEvent("MouseEvents");
            e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            D.body.removeChild(a);
        }, 66);
        return true;
    }; /* end if('download' in a) */



    //do iframe dataURL download: (older W3)
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return true;
}

pour l'utiliser:

download('the content of the file', 'filename.txt', 'text/plain');

39
Lifecube

La réponse ci-dessus est utile mais, j'ai trouvé le code qui vous permet de télécharger le fichier texte directement sur un clic de bouton. Dans ce code, vous pouvez également changer filename comme vous le souhaitez. C'est une fonction javascript pure avec HTML5. Travaille pour moi!

function saveTextAsFile()
{
    var textToWrite = document.getElementById("inputTextToSave").value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
      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();
}
20
Niraj

Dans le cas où il n'est pas possible d'utiliser la nouvelle solution Blob, qui est certainement la meilleure solution pour les navigateurs modernes, il est toujours possible d'utiliser cette approche plus simple, qui limite d'ailleurs la taille du fichier. :

function download() {
                var fileContents=JSON.stringify(jsonObject, null, 2);
                var fileName= "data.json";

                var pp = document.createElement('a');
                pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
                pp.setAttribute('download', fileName);
                pp.click();
            }
            setTimeout(function() {download()}, 500);

$('#download').on("click", function() {
  function download() {
    var jsonObject = {
      "name": "John",
      "age": 31,
      "city": "New York"
    };
    var fileContents = JSON.stringify(jsonObject, null, 2);
    var fileName = "data.json";

    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.click();
  }
  setTimeout(function() {
    download()
  }, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="download">Download me</button>
6
loretoparisi

Essayer

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent("My DATA");
a.download = 'abc.txt';
a.click();
4
Kamil Kiełczewski

Utilisez le code de l'utilisateur @ useless-code ci-dessus ( https://stackoverflow.com/a/21016088/327386 ) pour générer le fichier. Si vous souhaitez télécharger le fichier automatiquement, transmettez à cette fonction le textFile qui vient d'être généré:

var downloadFile = function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
    iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
}
3
RPM

J'ai trouvé de bonnes réponses ici, mais j'ai aussi trouvé un moyen plus simple.

Le bouton permettant de créer le blob et le lien de téléchargement peuvent être combinés en un seul lien, l’élément de lien pouvant avoir un attribut onclick. (L'inverse ne semble pas possible, l'ajout d'un href à un bouton ne fonctionne pas.)

Vous pouvez attribuer un style au lien en tant que bouton en utilisant bootstrap, qui reste du javascript pur, à l'exception du style.

La combinaison du bouton et du lien de téléchargement réduit également le code, car moins d'appels laids getElementById sont nécessaires.

Cet exemple nécessite un seul clic sur le bouton pour créer le blob de texte et le télécharger:

<a id="a_btn_writetofile" download="info.txt" href="#" class="btn btn-primary" 
   onclick="exportFile('This is some dummy data.\nAnd some more dummy data.\n', 'a_btn_writetofile')"
>
   Write To File
</a>

<script>
    // URL pointing to the Blob with the file contents
    var objUrl = null;
    // create the blob with file content, and attach the URL to the downloadlink; 
    // NB: link must have the download attribute
    // this method can go to your library
    function exportFile(fileContent, downloadLinkId) {
        // revoke the old object URL to avoid memory leaks.
        if (objUrl !== null) {
            window.URL.revokeObjectURL(objUrl);
        }
        // create the object that contains the file data and that can be referred to with a URL
        var data = new Blob([fileContent], { type: 'text/plain' });
        objUrl = window.URL.createObjectURL(data);
        // attach the object to the download link (styled as button)
        var downloadLinkButton = document.getElementById(downloadLinkId);
        downloadLinkButton.href = objUrl;
    };
</script>
2
Roland