PDF・Word・Excel・テキスト・画像などのファイルを、ブラウザ上で展開せずにダウンロードさせる方法を、Chrome・Safari・Firefox・Opera・IEのPCブラウザと、Android2.3および4.4の標準ブラウザ、iOS8.3のSafariで動作確認＆比較し、クロスブラウザな方法を探ります。
aタグにdownload属性を付けると、ファイルを表示せずにダウンロードをさせる、という大変有益な仕様がHTML5で実装されました。
<a href="./file/myfile.pdf" download="myfile.pdf">PDFファイル</a>
というようにファイル名を指定します。PHPを利用している場合はファイル名取得にbasename関数が便利です。
昔から使用されてきた方法です。ファイルをブラウザで表示できない方法にして設置し、かつ圧縮も出来る優れた方法です。
変換もPCからなら「右クリック」→「送る」→「圧縮（zip形式）フォルダー」と選択するだけなので簡単です。
ファイルを読み込み時に、
Content-Type: application/force-download
Content-disposition: attachment; filename="myfile.pdf"
というヘッダーを設置し、ダウンロードを促す方法です。PHPでしたら例えば
$filepath = "./myfile.pdf";
header("Content-Type: application/force-download");
header("Content-disposition: attachment; filename=\"".basename($filepath)."\"");
readfile($filepath);
exit();
とやってヘッダーを送信します。
クライアントサイド的な前の2つの方法に比べると、手軽さがグッと下がるサーバーサイドの方法です。
| HTML5のdownload属性 | zip圧縮 | force-downloadヘッダ | |
| Chrome 42 | ○ | ○ | ○ |
| Mac Safari 5 | △*1 ブラウザ上で表示後にダウンロード可 | ○ | ○ |
| Firefox 38 | ○ | ○ | ○ |
| Opera 29 | ○ | ○ | ○ |
| IE6*2 | × ブラウザ上で表示 | ○ | ○ |
| IE7*2 | × ブラウザ上で表示 | ○ | ○ |
| IE8*2 | × ブラウザ上で表示 | ○ | ○ |
| IE9*2 | × ブラウザ上で表示 | ○ | ○ |
| IE10*2 | × ブラウザ上で表示 | ○ | ○ |
| IE11*2 | × ブラウザ上で表示 | ○ | ○ |
| Android2.3.4標準ブラウザ | ○ | ○ | × 不可 |
| Android4.4.2標準ブラウザ | ○ | ○ | ○ |
| Mobile Safari8 iOS (iPod Touch) | ○ 関連付けのあるソフトが選択可 | ×*3 不可 | ○ 関連付けのあるソフトが選択可 |
注意事項）
*1) 例えばテキストファイルはダウンロードリンクが表示されませんでした。
*2) IEはエミュレータではなく実機で行っています。
*3) iPod TouchにはZipファイル用のソフトをインストールしていません。
Android2.3.4の標準ブラウザでforce-downloadを使用すると「ダウンロードに失敗しました」とエラーが表示されます。
また、iOSでzipをダウンロードすると、「このファイルは開けません」的なメッセージが表示されます。
以上の2つは、ユーザビリティを考えたときに致命的であり、スマホからのアクセスも考慮する場合は、避けた方が無難です。PCサイトであれば、この2つの手法はいずれも利用可能です。
download属性は、IE系で利用できないことと、Mac Safariでファイルによって挙動が変わりそうなところが不安定ですが、「少なくとも閲覧は出来る」という点が他に勝ります。
ファイルのダウンロードリンクの近くに「ダウンロードできない場合は、右クリックからダウンロードしてください」と言ったメッセージを付記することで、すべてのユーザーにダウンロードの機会を提供できます。
また、もっとも新しい仕様であることから、将来カバー率が上昇することが期待されます。
以上から、当ブログではdownload属性を利用してダウンロードを促すことを推奨します。
まめわざにも、ダウンロード用のファイルを設置するブロックがありますが、ここでもdownload属性を使用しています。
このブロックでは、パソコン上のPDFなどのファイルをアップロードするだけで、ファイルアイコン付のダウンロードリンクが設置出来ます。日本語ファイルでもファイル名の変換機能があるのでアップロード可能です。