ユーザーが文字列の内容をシステム上のファイルに保存できるように、ブラウザに「ダイアログとして保存」を表示させるにはどうすればよいですか?
例えば:
var myString = "my string with some stuff";
save_to_filesystem(myString,"myString.txt");
次のような結果になります。
ユーザーが文字列の内容をシステム上のファイルに保存できるように、ブラウザに「ダイアログとして保存」を表示させるにはどうすればよいですか?
例えば:
var myString = "my string with some stuff";
save_to_filesystem(myString,"myString.txt");
次のような結果になります。
誰かがまだ疑問に思っている場合に備えて...
私はこのようにしました:
<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>
ソースを思い出せませんが、次のテクニック/機能を使用しています。
参照が見つかりました:
http://paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/
編集:コメントから収集できるように、これはで機能しません
ネイティブファイルシステムAPIと呼ばれる新しい仕様があり、次のようにこれを適切に行うことができます。
const result = await window.chooseFileSystemEntries({ type: "save-file" });
ここにデモがありますが、オリジントライアルを使用しているため、サインアップするか構成フラグを有効にしない限り、自分のWebサイトでは機能しない可能性があり、明らかにChromeでのみ機能します。Electronアプリを作成している場合は、これがオプションになる可能性があります。
このためのjavascriptライブラリがあります。GithubのFileSaver.jsを参照してください。
ただし、saveAs()
関数は純粋な文字列をブラウザに送信しないため、次のように変換する必要がありますblob
。
function data2blob(data, isBase64) {
var chars = "";
if (isBase64)
chars = atob(data);
else
chars = data;
var bytes = new Array(chars.length);
for (var i = 0; i < chars.length; i++) {
bytes[i] = chars.charCodeAt(i);
}
var blob = new Blob([new Uint8Array(bytes)]);
return blob;
}
saveAs
次に、次のようにBLOBを呼び出します。
var myString = "my string with some stuff";
saveAs( data2blob(myString), "myString.txt" );
もちろん、上記のjavascriptライブラリをWebページに含めることを忘れないでください。<script src=FileSaver.js>
これは、HTML5saveAs
関数のこのクロスブラウザjavascript実装を使用して可能です:https ://github.com/koffsyrup/FileSaver.js
テキストを保存するだけの場合、上記のスクリプトは、JSのみを使用して、すべてのブラウザー(IEのすべてのバージョンを含む)で機能します。
javascriptのみを使用したソリューション
function saveFile(fileName,urlFile){
let a = document.createElement("a");
a.style = "display: none";
document.body.appendChild(a);
a.href = urlFile;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
}
let textData = `El contenido del archivo
que sera descargado`;
let blobData = new Blob([textData], {type: "text/plain"});
let url = window.URL.createObjectURL(blobData);
//let url = "pathExample/localFile.png"; // LocalFileDownload
saveFile('archivo.txt',url);
execComandの使用:
<input type="button" name="save" value="Save" onclick="javascript:document.execCommand('SaveAs','true','your_file.txt')">
次のリンク: execCommand