Ist es möglich, Daten nur mit JavaScript in eine Datei zu schreiben?

Sie können Dateien im Browser mit Blob und URL.createObjectURL erstellen. Alle neueren Browser nterstützen dies .

Sie können die von Ihnen erstellte Datei nicht direkt speichern, da dies massive Sicherheitsprobleme verursachen würde. Sie können sie jedoch als Download-Link für den Benutzer bereitstellen. Sie können einen Dateinamen über das download attribute des Links in Browsern vorschlagen, die das download attribute unterstützen. Wie bei jedem anderen Download hat der Benutzer, der die Datei herunterlädt, das letzte Wort über den Dateinamen.

_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;
  };
_

Hier ist ein Beispiel , das diese Technik verwendet, um beliebigen Text aus einem textarea zu speichern.

Wenn Sie den Download sofort starten möchten, anstatt den Benutzer zum Klicken auf einen Link auffordern zu müssen, können Sie Mausereignisse verwenden, um einen Mausklick auf den Link als Lifecube 's answer zu simulieren = tat. Ich habe ein aktualisiertes Beispiel erstellt, das diese Technik verwendet.

_  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);
_

Wenn Sie über Javascript im Browser sprechen, können Sie aus Sicherheitsgründen keine Daten direkt in die lokale Datei schreiben. Mit der neuen HTML 5-API können Sie nur Dateien lesen.

Aber wenn Sie Daten schreiben möchten, und dem Benutzer das Herunterladen als Datei auf lokal ermöglichen möchten. Der folgende Code funktioniert:

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

um es zu benutzen:

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

Die obige Antwort ist nützlich, aber ich habe Code gefunden , der Ihnen hilft, die Textdatei direkt per Knopfdruck herunterzuladen. In diesem Code können Sie auch filename nach Belieben ändern. Es ist reine Javascript-Funktion mit HTML5. Funktioniert bei mir!

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

Falls es nicht möglich ist, die neue Blob -Lösung zu verwenden, die mit Sicherheit die beste Lösung in einem modernen Browser ist, ist es dennoch möglich, diesen einfacheren Ansatz zu verwenden, bei dem die Dateigröße im Übrigen begrenzt ist :

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>

Versuchen

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

Verwenden Sie den Code von user @ useless-code oben ( https://stackoverflow.com/a/21016088/327386 ), um die Datei zu generieren. Wenn Sie die Datei automatisch herunterladen möchten, übergeben Sie das soeben generierte textFile an diese Funktion:

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

Ich habe hier gute Antworten gefunden, aber auch einen einfacheren Weg gefunden.

Die Schaltfläche zum Erstellen des Blobs und der Download-Verknüpfung können in einer Verknüpfung kombiniert werden, da das Verknüpfungselement ein Onclick-Attribut haben kann. (Das Umgekehrte scheint nicht möglich zu sein. Das Hinzufügen einer Href zu einer Schaltfläche funktioniert nicht.)

Sie können den Link als Schaltfläche mit bootstrap formatieren, das mit Ausnahme des Stils immer noch reines Javascript ist.

Durch das Kombinieren der Schaltfläche und des Download-Links wird auch der Code reduziert, da weniger dieser hässlichen getElementById Aufrufe benötigt werden.

Dieses Beispiel benötigt nur einen Knopfdruck, um den Text-Blob zu erstellen und herunterzuladen:

<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>