読者です 読者をやめる 読者になる 読者になる

jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

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

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

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

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

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