2016/05/23

【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でもファイルをダウンロードさせる方法を思いた。いろいろあったけど、クライアントサイドだけでなんとかしようとするのは限界があるらしい。


実装例




参考サイト




以上

written by @bc_rikko

2 件のコメント :

  1. MacのSafariでダウロードボタンをクリックすると、abcの文字がページに表示され、ダウンロードできませんでした。

    返信削除
    返信
    1. コメントありがとうございます。

      Safariについては、本文にも書いてあるようにダウンロードできないため、別タブにファイル内容を表示しています。何か良い方法を見つけたら、追記しようと思います。

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

      削除