HTML5+JSでファイル保存
HTML5+JavaScriptでファイルをPCに保存する。
結論から言うと、まだ使えない。
・IEだとデフォルトのファイル名の設定が無効
・Operだと「window.URL」が「オブジェクトじゃないからエラー」なったりする
となってくるとやっぱりAjax＋PHPでファイル出力が無難かな。
それはそれとしてHTML5のBlobってのを使うとか…。
よくわからん。わからんけど…使うことは現状無いから調査はしないことにする。
とりあえずソース
<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のファイルは適当に拾ってくるなりして対応することが必要。