web-dev-qa-db-ja.com

ユーザーがシステムのファイルに文字列のコンテンツを保存できるように、ブラウザに「ダイアログとして保存」を表示する方法は？

ユーザーがシステム上のファイルに文字列のコンテンツを保存できるように、「ダイアログとして保存」をブラウザに表示するにはどうすればよいですか？

例えば：

var myString = "my string with some stuff";
save_to_filesystem(myString,"myString.txt");

次のような結果になります。

Example

javascriptsavesavefiledialog
47
MaiaVictor

誰でもまだ疑問に思っている場合...

私はこのようにしました：

<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>

私のソースを思い出すことはできませんが、次のテクニックや機能を使用しています：

  1. html5ダウンロード属性
  2. データURI

参照が見つかりました：

http://paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/

編集：コメントから収集できるように、これはNOTwork in

  1. Internet Explorer（Edge v13でも動作します）
  2. サファリ
  3. iOS Safari
  4. Opera Miniは
  5. Androidブラウザー（4.3以前）

http://caniuse.com/#feat=download

27
Craig Wayne

このための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;
}

次に、次のようにblobでsaveAsを呼び出します。

var myString = "my string with some stuff";
saveAs( data2blob(myString), "myString.txt" );

もちろん、<script src=FileSaver.js>を使用して、上記のJavaScriptライブラリをWebページに含めることを忘れないでください

10
Tomas M

これは、HTML5 saveAs関数のクロスブラウザーjavascript実装を使用して可能です。 https://github.com/koffsyrup/FileSaver.js

テキストを保存するだけであれば、上記のスクリプトはすべてのブラウザー（IEのすべてのバージョンを含む）で動作し、JSのみを使用します。

9
superphonic