JavaScriptでクロスブラウザ対応（２）

今回は、JavaScriptでテキストデータをファイルに書き出す方法とその際のクロスブラウザ対応*1を紹介します。

テキストデータをファイルに書き出す

JavaScriptではFileAPIを利用してローカルファイルへアクセスできます*2。
今回は、File APIの中のBlobというオブジェクトを使います。こちらのサイトを参考にしました。
http://kurukurupapa.hatenablog.com/entry/20121006/1349522062

 <a id="download" target="_blank">ここからダウンロード</a>

targetを_blankにすると新規にウインドウを開いてそこに内容を表示するという設定になります。

var content = "test";
var blob = new Blob([content],{"type": "application/x-msdownload"});
var url = window.URL.createObjectURL(blob);
document.getElementById("download").href = url;

blobオブジェクトのdownload属性

blobオブジェクトにはdownload属性でダウンロードするファイルのファイル名の初期値を設定できます。しかし、この属性はChromeとFirefoxのみが対応しておりIEでは無効になります。これに対応するためIEでは別のメソッドが用意されています。

ChromeとFirefoxの場合

document.getElementById("download").download = "temp.txt";

IEの場合

window.navigator.msSaveOrOpenBlob(blob, "temp.txt");

*1:Chrome, Firefox, InternetExplorerをサポートします。

*2:ただしブラウザによってセキュリティ違反となる可能性があるので、ローカルサーバーを立てて行う方がいいようです。ローカルサーバーの立て方は、こちらをご覧ください。 ブラウザからローカルファイルへのアクセス方法 - jnobuyukiのブログ