HTML5+JSでファイル保存

2014/04/22

HTML5+JavaScriptでファイルをPCに保存する。

結論から言うと、まだ使えない。
・IEだとデフォルトのファイル名の設定が無効
・Operだと「window.URL」が「オブジェクトじゃないからエラー」なったりする

となってくるとやっぱりAjax+PHPでファイル出力が無難かな。

それはそれとしてHTML5のBlobってのを使うとか…。
よくわからん。わからんけど…使うことは現状無いから調査はしないことにする。

とりあえずソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title>HTML5+JSでファイルの保存</title>

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    if (typeof Blob !== "undefined") {
      // alert("このブラウザに対応しています");
    }
    else {
      alert("このブラウザには対応していません");
    }
    
    $("#content").keyup(function() {
      setBlobUrl("download", $("#content").val());
    });
    
    $("#content").keyup(); // 上で設定したkeyupイベント(setBlobUrl)を実行する
  });
  
  function setBlobUrl(id, content) {
    // 指定されたデータを保持するBlobを作成する。
    var blob = new Blob([ content ], { "type" : "application/x-msdownload" });
    
    // Aタグのhref属性にBlobオブジェクトを設定する。
    window.URL = window.URL || window.webkitURL;
    $("#" + id).attr("href", window.URL.createObjectURL(blob));
    $("#" + id).attr("download", "tmp.txt"); // 保存ファイル名(※IEだと動作せず)
  }
</script>

</head>
<body>
<div>
  <textarea id="content" cols="40" rows="5">Hello, World!
  こんにちは、みなさん!</textarea>
  <a id="download" target="_blank">ダウンロード(IEでは、右クリック>対象をファイルに保存)</a>
</div>

</body>
</html>

※Jqueryのファイルは適当に拾ってくるなりして対応することが必要。

新着(ニュース関連以外)

2017-11-09
PCでプッシュ通知ってのをしたい。
2017-11-06
PHPのバージョンを上げたらwikiが壊れたっぽい。
2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。