jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

JavaScriptでクロスブラウザ対応(2)

今回は、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属性でダウンロードするファイルのファイル名の初期値を設定できます。しかし、この属性はChromeFirefoxのみが対応しておりIEでは無効になります。これに対応するためIEでは別のメソッドが用意されています。

ChromeFirefoxの場合
document.getElementById("download").download = "temp.txt";
IEの場合
window.navigator.msSaveOrOpenBlob(blob, "temp.txt");

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

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