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
Einige Vorschläge dafür -
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>