ファイルをブラウザで展開せずにダウンロードを行ってほしいという案件を受けることになりいろいろと調べてみた。
IEはあきらめてもいいかなと思いつつの比較です。まぁサーバーサイドでPHPなどで対応を行ってもらえれば一番いいのですが方法を知っておくと便利なので、記述。
HTML5のdownload属性を使用する
HTML5からdownload属性が指定可能になりました。まぁ単純にリンク先のファイルをローカルにダウンロードさせる属性で今までPHPでやっていたことがHTMLで行うことができ、スマホでも対応できるのでありがたい属性です。実際にHTMLで記述すると下記のようになります。
<a href="/sample/testdownload.jpg" download="testdownload.jpg">テストダウンロード</a>
上記の記述でダウンロードを行うことができます。
See the Pen adyZed by Atsushi (@office606) on CodePen.
ファイルをzipに圧縮する
ZIPでダウンロードは昔からある手法です。
ローカルで作業を行うので、手間が多くなるのでもう使用せずに他の2つの手法を使用して行きます。
ただ、機種依存がPCブラウザでの機種依存は少いですが、スマホで使用できない（zip展開させるのが不便）ので時代に沿わない仕様かなと思っています。
headerにforce-downloadを含める
これはサーバーサイドの話なので基本、僕は割愛。
ただ、PHPを使用する場合にはいいかもここに詳しいことが書いてます。
スポンサーリンク
ためしてみて思ったこと
総評としては、ブラウザ問題が多いのでそれぞれで使用する時の状況を考えないといけないですが、今後のことを考えるとdownload属性を使うのが一番いいのかなと、とりあえずは最新ブラウザの対応もされるのを祈ります。
iframeなどの手法も見つけましたがやっぱりユーザー的によくないような感じがして。まぁダウンロードはAPIを使用する。
もしくはサーバー側で設定した方がいいんだろうなと思います。
まぁ今回はHTML5のdownload属性を使用して案件を進めていこうかなと思っています。
もしいい方法があるなら教えてください。
スポンサーリンク
Originally posted 2016-01-13 20:15:32.