【JavaScript】各ブラウザでダウンロード処理を実装する（Chrome, Firefox, IE, MS Edge, Safari）

Webページから何らかのファイルをダウンロードしたい場合は、ブラウザごとに実装する必要がある。

以下のブラウザを対象とする。

• Chrome
• Firefox
• Internet Explorer 11
• MS Edge
• Safari

※ 2016/05/23時点での最新バージョンで動作確認済み

ダウンロード処理を実装する

// ダウンロードしたいコンテンツ、MIMEType、ファイル名
var content  = 'abc';
var mimeType = 'text/plain';
var name     = 'test.txt';

// BOMは文字化け対策
var bom  = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, content], {type : mimeType});

var a = document.createElement('a');
a.download = name;
a.target   = '_blank';

if (window.navigator.msSaveBlob) {
  // for IE
  window.navigator.msSaveBlob(blob, name)
}
else if (window.URL && window.URL.createObjectURL) {
  // for Firefox
  a.href = window.URL.createObjectURL(blob);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
else if (window.webkitURL && window.webkitURL.createObject) {
  // for Chrome
  a.href = window.webkitURL.createObjectURL(blob);
  a.click();
}
else {
  // for Safari
  window.open('data:' + mimeType + ';base64,' + window.Base64.encode(content), '_blank');
}

Internet Explorer, MS Edge

window.navigator.msSaveBlobをつかう。
Elementをつくらなくても良いので、各ブラウザの中で一番ラクに実装できる。

Firefox

aタグを作成し、そのリンクにwindow.URL.createObjectURLを設定すれば、a.clickでダウンロード処理を実行することができる。
ただし、clickイベントを発火する前にbodyなどに追加しなければ正常に動作しないので注意。
もちろんclickイベントが終わったらremoveChildで削除する。

Chrome

Chromeではwindow.webkitURL.createObjectURLを使う。
Firefoxの処理に似ているが違いとしては、Chromeの場合はbodyなどに追加しなくてもメモリ上だけで対応できるという点がある。
だからappendChildもremoveChildもする必要がない。

Safari

○ね！！！！

Safariはファイルをダウンロードすることができないため、別タブにファイルの内容を表示してお茶を濁すことにしておく。

---

追記: 2016/12/22 12:30
なんとかSafariでもファイルをダウンロードさせる方法を思いた。いろいろあったけど、クライアントサイドだけでなんとかしようとするのは限界があるらしい。

---

実装例

参考サイト

• window.URL.createObjectURL - Web API インターフェイス | MDN
• 【JavaScript】ファイルのアップロード・ダウンロードを実装する | Black Everyday Company
• JavaScriptでファイルを出力する（fileSystem APIの代用） | Black Everyday Company

以上

written by @bc_rikko