JavaScriptだけを使用してファイルにデータを書き込むことは可能ですか？
JavaScriptを使って既存のファイルにデータを書きたい。コンソールには印刷したくありません。実際にabc.txtにデータを書きたい。私は多くの答えられた質問を読みましたが、彼らがコンソールに印刷しているところはどこでも。どこかで彼らはコードを与えましたが、それは機能しません。それでは、どなたか手助けをしてくださいファイルに実際にデータを書き込む方法。
私はコードを参照しましたが、それは動作していません：それはエラーを与えます：
Uncaught TypeError: Illegal constructor
クロムと
SecurityError: The operation is insecure.
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();
}
それでは、Javascriptだけを使って実際にファイルにデータを書き込むことができますか。私を助けてください
このためのいくつかの提案 -
- あなたがクライアントマシンにファイルを書き込もうとしているなら、あなたはいかなるクロスブラウザの方法でもこれをすることができません。 IEには、「信頼できる」アプリケーションがActiveXオブジェクトを使用してファイルを読み書きできるようにするメソッドがあります。
- あなたがそれをあなたのサーバーに保存しようとしているなら、あなたのサーバーにテキストデータを渡して、そして何らかのサーバーサイド言語を使ってコードを書くファイルを実行してください。
- かなり小さいいくつかの情報をクライアント側に保存するには、cookieを使用します。
- ローカルストレージ用のHTML 5 APIの使用.
ブラウザで Blob および URL.createObjectURL を使用してファイルを作成できます。最近のブラウザはすべて これをサポートしています 。
作成したファイルを直接保存することはできません。セキュリティ上の問題が発生する可能性があるためですが、ダウンロードリンクとしてユーザーに提供することはできます。ダウンロード属性をサポートするブラウザでは、リンクの download属性 を介してファイル名を提案できます。他のダウンロードと同様に、ファイルをダウンロードしているユーザーは、ファイル名に関して最終的な発言権を持ちます。
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;
};
これがtextareaからの任意のテキストを保存するためにこのテクニックを使う example です。
ユーザーがリンクをクリックするのではなくダウンロードをすぐに開始したい場合は、マウスイベントを使用して Lifecube 's answer didのようにリンク上でマウスクリックをシミュレートできます。このテクニックを使った 更新された例 を作りました。
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);
ブラウザのJavaScriptについて話している場合は、セキュリティ上の理由からローカルファイルに直接データを書き込むことはできません。 HTML 5の新しいAPIはあなたがファイルを読むことしか許さない。
しかし、あなたがデータを書きたいならば、そしてローカルにファイルとしてユーザーがダウンロードすることを可能にしなさい。次のコードは機能します。
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;
}
それを使用するには：
download('the content of the file', 'filename.txt', 'text/plain');
上記の答えは便利ですが、 コードを見つけました ボタンをクリックして直接テキストファイルをダウンロードするのに役立ちます。このコードではあなたが望むようにfilenameを変更することもできます。 HTML5を使った純粋なJavaScript関数です。私のために働く！
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();
}
新しいBlobソリューションを使用することが不可能である場合、それは確かに現代のブラウザにおける最良のソリューションですが、それでもなお、この単純なアプローチを使用することは可能です。
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>上記のuser @ useless-code（ https://stackoverflow.com/a/21016088/327386 ）によるコードを使用してファイルを生成します。ファイルを自動的にダウンロードしたい場合は、生成されたばかりのtextFileをこの関数に渡します。
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;
}
ここでは良い答えが見つかりましたが、もっと簡単な方法も見つかりました。
BLOBを作成するボタンとダウンロードリンクは、link要素にonclick属性を含めることができるため、1つのリンクにまとめることができます。 （逆は不可能です、ボタンにhrefを追加しても機能しません）。
bootstrapを使用してリンクをボタンとしてスタイル設定することができます。これはスタイルを除いて純粋なJavaScriptです。
ボタンとダウンロードリンクを組み合わせることで、必要なgetElementById呼び出しが少なくなるため、コードも削減されます。
この例では、テキストBLOBを作成してダウンロードするためにボタンを1回クリックするだけで済みます。
<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>
やってみる
let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent("My DATA");
a.download = 'abc.txt';
a.click();