こんにちは！ゆいです！
今回は、HTMLを使ってファイルをダウンロードさせる方法を記します。
こんなときに役立ちます！
- ファイルをユーザーにダウンロードさせたいとき（Word、Excel、PowerPoint、PDFなど）
- WordPressでオリジナルテーマを作成しているとき
ゆい「こんなのできるの？難しいんじゃない？」と思ってたけど、想像以上に簡単にできちゃうから安心してね！
HTMLでファイルのダウンロードを設定する
こちらのコードを使えばファイルでダウンロードできる設定ができちゃいます。
基本の書き方
<a href="ダウンロードしたいファイルのurl" download>任意のテキスト</a>downloadフォルダに入っている「test.pdf」ファイルをダウンロードしたいとき
<a href="downlord/test.pdf" download>test.pdfのダウンロード</a>
くまaタグって「別のページへの移動」だけじゃないの‥？
ゆいそう！down属性を付けちゃえば、ダウンロードもできちゃうの！
くま便利だね！
PDFファイルの他に、Word、Excel、PowerPoint、画像ファイルなんかも「a href=”test.pdf”」の「test.pdf」を変えれば、ダウンロードできるようになります。
プログラムファイル（.exeや.swf）はブラウザやウイルス対策ソフトによって、警告メッセージが表示されたり、ダウンロードが無効になったりする場合もあります。
その場合はzipなどに圧縮したファイルをダウンロードしてもらうようにしましょう。
ファイル名を指定してダウンロードする方法
基本の書き方
<a href="ダウンロードしたいファイルのurl " download="ダウンロードさせたときのファイル名.拡張子">任意のテキスト</a>downloadフォルダに入っている「test.pdf」ファイルの名前を、「テスト.pdf」と変えてダウンロードしたいとき
<a href="downlord/test.pdf" download="テスト.pdf">テスト.pdfのダウンロード</a>
ゆい操作はこれだけ！
注意点
1. ダウンロードしたいファイルのurlを間違えない
ファイルがある場所を間違えてしまうと、ダウンロードすることができません。
上の「downlord/test.pdf」の例でいくと、「downlord/」がないとダウンロードすることができません。
downloadフォルダにファイルが入っていることを無視してしまっているからです。
ディレクトリやファイルがあるフォルダ名にも注意しましょう！
くまファイル名だけだとダウンロードできないことがあるから注意
ゆい同一サイト内であれば絶対パス、相対パスどちらで記述してもOKだよ！
2. 外部ファイルのダウンロードはできない
downlord属性を使ってダウンロードできるファイルは、自分のサイト内にデータがあるときだけです。
例外的に一部ブラウザーでは利用可能のようですが、セキュリティーの観点から各ブラウザーでこのケースでの使用ができなくなる傾向にあるようです。
3. IEではdownload属性が使えない
download属性はIE以外のブラウザーで最新のものであれば、問題なく使えるようです。
対処法
- target=”_blank”を併記してダウンロードされない場合は別ページで該当ファイルを開かせる
（downlord属性に対応したブラウザーの場合はダウンロードが優先されるので、target=”_blank”を併記したとしても別ページが開かれることはないです） - JavaScriptを使う
JavaScriptを使う場合のコード例
<html>
<body>
<script>
function download(filename, pathname){
var anchor = document.createElement('a');
anchor.download = filename;
var textnode = document.createTextNode("テスト.pdfのダウンロード");
document.body.appendChild(anchor);
anchor.appendChild(textnode);
anchor.href = pathname;
}
download("テスト.pdf","downlord/test.pdf");
</script>
</body>
</html>ファイルをダウンロード処理を行うのはdownloadという自作の関数です。
downloadには引数が２つ必要です。
一つ目はダウンロードされるファイルを保存する際に使用するファイル名、二つ目はダウンロードされるファイルのパス名です。
こちらのコードの場合だと、downloadフォルダにあるファイル「downlord/test.pdf」が「テスト.pdf」というファイル名でダウンロードされます。
まとめ
いかがでしたでしょうか？
もし「ファイルを簡単にダウンロードさせたい！」という場合は、ぜひ参考にしてみてくださいね！
ビジネスや副業・起業に関するご相談を承ります
1. 60分単発コンサル
事業相談、サイト制作方法、集客など、どんなご相談でもOKです。
60分間の個人セッションの中で、あなたの目的やお悩みごとに今やるべきことや解決につながる行動を一緒に導き出します。
困ったときや行き詰まったときなどにお気軽にご利用ください。
2. ノーコード / ローコードWeb制作 完全マスターコーチング
WebデザイナーとしてWeb制作で副業・起業したい方に向けての個別コーチングです。
ご案内は公式LINEで行なっています。
【公式LINE登録者限定】今なら有料級6大プレゼントを配布中。
- 「案件が獲得できるようになるためのスキルを身につける、超具体的な学習ロードマップ」
- 「6つのサイト制作ツールのメリット・デメリットをわかりやすく比較したスライド」
- 59枚の「Web制作に必須の画像素材サイトの紹介スライド」
- 42枚の「知らないとヤバい！ビジネスマナー35選のスライド」
- 学習に挫折しないための助けになる！「自分振り返りワークシート」
- 無料個別相談
3. ホームページ制作・リニューアル
訴求力が高いホームページを制作し、売上アップや採用効果アップ、ブランド力の向上など事業の活性化に繋げます。
アクセス解析などの数値やデータなどの分析に加え、女性ならではの感性と直感力を活かしたご提案や、女性向けデザインが得意です。
コメント