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

HTML5 ダウンロード

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

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

HTML5 ダウンロード

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 左クリックでダウンロード

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

参考

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

あるいは…

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

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた