HTML5を使ってファイルを表示させずにダウンロードさせる方法

↑
こんな感じで、何かを直接ダウンロードさせることがあるかと思います。
CSVでなくても、画像をダウンロードしてもらいたい、とかね。
表示させてから右クリックで保存ってのもできるんだけど、かっこわるい。

ブラウザで表示できるものはブラウザが表示しちゃうので、
だいたい下のようになります。

Content-Dispositionを使う方法があるのですが、面倒です。
こういうの↓
PHP で CSV ファイルをダウンロードさせる
PDFファイルやMP3ファイルを左クリックでダウンロードさせる方法

しかも、Content-Dispositionはもともとファイルをダウンロードさせるためにあるものではありません。

[googlead]

HTML5で実現する

HTML5ではdownloadという属性が使えます。
sample.csvをダウンロードさせたい場合、download="sample.csv"とするだけ。
実際にはこんな感じ。
downloadにはパスは書かなくてファイル名だけでいいみたい。
<a href="yourdomain.com/data/sample.csv" download="sample.csv"> CSVをダウンロードする</a>

無事にダウンロードになりましたよっと。
HTML5って便利。

参考

去年のビデオですが、へーってことが結構ありました。
Google I/O 2012 - The Web Can Do That!?

あるいは…

Zip圧縮しましょう。ってのが伝統的？な方法かもね。
お手軽だしHTML5でなくてもいいから。
ユーザーの動作がひと手間増えるから少し微妙だけど。
画像一枚がZip圧縮されてたら確実に嫌だね…