PDFなどのファイルを強制的にダウンロードさせる3つ方法の比較

PDF・Word・Excel・テキスト・画像などのファイルを、ブラウザ上で展開せずにダウンロードさせる方法を、Chrome・Safari・Firefox・Opera・IEのPCブラウザと、Android2.3および4.4の標準ブラウザ、iOS8.3のSafariで動作確認&比較し、クロスブラウザな方法を探ります。

広告

強制ダウンロード方法1)HTML5のdownload属性を使う

aタグにdownload属性を付けると、ファイルを表示せずにダウンロードをさせる、という大変有益な仕様がHTML5で実装されました。

<a href="./file/myfile.pdf" download="myfile.pdf">PDFファイル</a>

というようにファイル名を指定します。PHPを利用している場合はファイル名取得にbasename関数が便利です。

強制ダウンロード方法2)ファイルをzip圧縮する

昔から使用されてきた方法です。ファイルをブラウザで表示できない方法にして設置し、かつ圧縮も出来る優れた方法です。
変換もPCからなら「右クリック」→「送る」→「圧縮(zip形式)フォルダー」と選択するだけなので簡単です。

強制ダウンロード方法3)headerにforce-downloadを含める

ファイルを読み込み時に、
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つの方法に比べると、手軽さがグッと下がるサーバーサイドの方法です。

3つの方法の実証実験と比較

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ファイル用のソフトをインストールしていません。

広告

結論:万能なものはないが、download属性が優秀

Android2.3.4の標準ブラウザでforce-downloadを使用すると「ダウンロードに失敗しました」とエラーが表示されます。
また、iOSでzipをダウンロードすると、「このファイルは開けません」的なメッセージが表示されます。
以上の2つは、ユーザビリティを考えたときに致命的であり、スマホからのアクセスも考慮する場合は、避けた方が無難です。PCサイトであれば、この2つの手法はいずれも利用可能です。

download属性は、IE系で利用できないことと、Mac Safariでファイルによって挙動が変わりそうなところが不安定ですが、「少なくとも閲覧は出来る」という点が他に勝ります。
ファイルのダウンロードリンクの近くに「ダウンロードできない場合は、右クリックからダウンロードしてください」と言ったメッセージを付記することで、すべてのユーザーにダウンロードの機会を提供できます。
また、もっとも新しい仕様であることから、将来カバー率が上昇することが期待されます。

以上から、当ブログではdownload属性を利用してダウンロードを促すことを推奨します。
まめわざにも、ダウンロード用のファイルを設置するブロックがありますが、ここでもdownload属性を使用しています。
このブロックでは、パソコン上のPDFなどのファイルをアップロードするだけで、ファイルアイコン付のダウンロードリンクが設置出来ます。日本語ファイルでもファイル名の変換機能があるのでアップロード可能です。

2015/5/19