【html】ファイルをダウンロードさせる最も簡単な方法 – JavaScript不要！download属性使用！

ホームページ上からファイルをダウウンロードさせたいという要望はよくあると思います。例えば、PDFのカタログだったり、エクセルのテンプレートフォームだったり、あるいは画像だったり、ダウロードさせたいファイルの形式は一つとは限りません。

こういった場合、もし仮にダウンロードさせたいファイルをリンクタグ（<a href=” “></a>）でリンクさせたとしても、同ファイルが表示されるだけで、ダウンロードさせる機能とは違ってきます。。。
また、ファイルをzip形式に圧縮した場合、リンクタグでリンクすることでダウンロードさせることはできますが、一度解凍しないと使用できないなどの不便が生じ、要望とは違うかもしれません。。。

今回はそんな問題なしで、様々な形式のファイルをダウンロードさせる最も簡単な方法をご紹介します。JavaScript不要で超簡単にできる方法なのでぜひご確認ください。

download属性の使い方

ファイルをダウンロードさせたい場合、以前はJavaScriptを使うケースが多かったと思うのですが、HTML5からa要素のdownload属性が登場し、とても簡単に設置でるようになりました。早速書き方をみてみましょう。

基本

書き方はとても簡単で、hrefにダウンロードさせたいファイルまでのパスを指定し、属性downloadを記述するだけです。これで、該当のファイルのリンクを開くのではなく、ダウンロードさせることができます。

例）

test.pdfをダウンロードする

ファイル名を指定してダウンロードする方法

「ダウンロードさせたいサーバー上のファイル名は英文字だが、ダウンロードさせたときのファイル名は、日本語にしたい」など、ダウンロードさせたときのファイル名をわかりやすいものに変更したいといった要望もあると思います。download属性を使った場合こういった要求にも対応することが可能です。

download=として“”内にダウンロードされたときに表示させたいファイル名、それと、.pdf .jpgなどダウロードさせたいファイルの拡張子を記述することで指定のファイル名に変換されたファイルがダウロードされます。

例）

テスト画像をダウウンロードする

これは、test.jpgという名前でサーバー上にあるファイルをテスト画像.jpgという名前でダウンロードさせる場合の記述例です。サーバー上に日本語ファイルを配置できない場合でも、このようにdownload属性を使うことで簡単にダウンロード時のファイル名を指定することが可能です。ちなみに通常ファイル名として指定ができない特殊記号などをファイル名に含めた場合は該当のワードが「_」に変換されます。

注意点と各ブラウザーでの対応状況

外部ファイルのダウンロードはできません

原則、downlord属性を使ったとしても外部サイトのファイルをダウンロードさせることはできません。一部ブラウザーでは利用可能と記載されている記事も見受けますが、セキュリティーの観点から各ブラウザーでこのケースでの使用ができなくなる傾向にあるようです。ちなみに、同一サイト内であれば絶対パス、相対パスどちらで記述してもdownlord属性は有効です。

ダウンロードに適さないファイル形式と対処方法

downlord属性を使うと様々な形式のファイルをダウンロードさせることができるようになりますが、.exeや.swfなどのプログラムファイルはブラウザーやウイルス対策ソフトの関係で警告メッセージが表示されたり、ダウンロードできない場合もあります。こういったファイルの場合はzipなどに圧縮したファイルをダウンロードしてもらうようにするといいと思います。

各ブラウザーにおける対応状況とdownlord属性が対応しない旧ブラウザーへの対策

各ブラウザーにおけるdownlord属性の対応状況ですが、IE以外のブラウザーで最新のものであれば問題なく使える認識で大丈夫そうです。もしdownlord属性が使えない旧ブラウザーへの対応を考えるならtarget=”_blank”を併記してダウンロードされない場合は別ページで該当ファイルを開かせるような対策がいいかもしれません。downlord属性に対応したブラウザーの場合はダウンロードが優先されるので、target=”_blank”を併記したとしても別ページが開かれる心配はなさそうです。