it-swarm.com.de

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

Ich möchte mit JavaScript Daten in eine vorhandene Datei schreiben. Ich möchte es nicht auf der Konsole ausdrucken. Ich möchte tatsächlich Daten in abc.txt schreiben. Ich habe viele beantwortete Fragen gelesen, aber alle, wo sie auf der Konsole gedruckt werden. Irgendwann haben sie Code angegeben, aber er funktioniert nicht. Also bitte kann mir jemand helfen, wie man tatsächlich Daten in File schreibt.

Ich habe auf den Code verwiesen, aber er funktioniert nicht: Er gibt folgenden Fehler aus:

 Uncaught TypeError: Illegal constructor 

auf chrome und

 SecurityError: The operation is insecure.

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

Können wir also Daten nur mit Javascript oder NICHT in eine Datei schreiben? Bitte helfen Sie mir Danke im Voraus

153
pareshm

Einige Vorschläge dafür -

  1. Wenn Sie versuchen, eine Datei auf dem Client-Computer zu schreiben, können Sie dies nicht browserübergreifend tun. IE verfügt über Methoden, mit denen "vertrauenswürdige" Anwendungen ActiveX-Objekte zum Lesen/Schreiben von Dateien verwenden können.
  2. Wenn Sie versuchen, es auf Ihrem Server zu speichern, geben Sie einfach die Textdaten an Ihren Server weiter und führen Sie den Datei-Schreibcode in einer serverseitigen Sprache aus.
  3. Um einige Informationen auf der Client-Seite zu speichern, die sehr klein sind, können Sie Cookies verwenden.
  4. Verwenden der HTML5-API für den lokalen Speicher.
75
Sujit Agarwal

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);
_
181
Useless Code

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

39
Lifecube

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

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

Versuchen

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

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

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