javascriptのみで完結するダウンロード処理の実装方法

ちょっと調べてみたけどどれも面倒なことをやっているのでメモ
せめて関数呼んだらダウンロード処理が始まる程度のことはやりたいですね
最新版のIE、Edge、Chrome、FireFoxで実行確認
IEだと2回ダウンロードされていたので修正。









実装手順


手順としては以下の様な感じです

1.ダウンロード用のデータ(Blob)を作成する
2.linkをjs上で作成する
3.作成したリンクをクリック

3が思ったより面倒くさかった



サンプル


See the Pen File download Sample by ninomae-makoto (@ninomae-makoto) on CodePen.



8行目(link.setAttribute...)でダウンロードするファイル名を指定しています。IEとEdgeは無効のようです。
13~16行(if(window.navi...))はIE、Edgeの場合通ります
17~21行(else {...)はChrome、FireFoxの場合通ります


補足



何かよくわからない処理が記述してあるのはブラウザ間で挙動が違ったからです。はい。

Chrome

10行目のlink.click();でダウンロードが始まる
特に問題なし

FireFox

link.click();が使えない(http://language-and-engineering.hatenablog.jp/entry/20090907/p1 参照)
18~20行目のイベントを作成してイベントを発火する形ならダウンロード可能

IE

dispatchEventの代わりにfireEventを使う必要があるらしい

Edge

dispatchEventだとファイル名がおかしくなる(指定できない?)


Blobとは?

ファイルみたいなものという認識でいいかな?
https://developer.mozilla.org/ja/docs/Web/API/Blob
今回の例はテキストだけど画像もいけるはず



みんなで仲良く手を取り合って発展させていくって誰か言ってたじゃないですかー!
MS内ですら挙動違うじゃないですかー!!

2016年5月8日日曜日