Javascriptの動的生成データのダウンロード処理

こんばんは。きわさです。

Javascriptで動的生成したデータをブラウザでダウンロードさせたいときのための方法です。

var content = ダウンロードさせるデータ;
var fileName = ファイル名;
var blob = new Blob([content], {type: 'application/octet-stream'});
var a = document.createElement('a');
a.download = fileName;
a.href = window.URL.createObjectURL(blob);
a.click();

ダウンロード処理はどうやらブラウザによって実装方法が異なるようで、IEの場合はこれではできないようです。
IEには window.navigator.msSaveBlob というものが用意されているようなので、これを使います。

var content = ダウンロードさせるデータ;
var fileName = ファイル名;
var blob = new Blob([content], {type: 'application/octet-stream'});
if(window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, fileName);
} else {
    var a = document.createElement('a');
    a.download = fileName;
    a.href = window.URL.createObjectURL(blob);
    a.click();
}

このように分岐することで、IE、Chrome、Firefoxあたりではできるかと思いますが、Safariについてはどうやら別に対応が必要そうです。。

スポンサーリンク