a要素のdownload属性は保存用ファイルへのリンクと提案するファイル名を示す

a要素のdownload属性は、リンク先を画面で開くのではなく、後で使うファイルとして保存させたい場合に使います。属性の値には、保存時に提案するファイル名を書けます。

ただし、download属性はファイルを生成する機能でも、閲覧権限を制限する機能でもありません。リンク先の用意、HTTP応答、別originから配信する場合の扱いを分けて設計してください。

hrefへ保存するファイルのURLを書く

W3CのHTML5 Recommendationでは、download属性を、リンク先のresourceがすぐに表示するものではなく、後で使うためにdownloadするものだと示す属性として定めています。

次は、自社site内にあるPDFを保存用リンクにする説明用の仮例です。

<a href="/files/service-guide.pdf" download>
  サービス案内を保存する
</a>

保存対象はhrefで決まります。downloadだけを書いても、PDFや画像は作られません。リンク文には「こちら」ではなく、何を保存するのかを書きます。

通常のページへ移動させたいリンクに、見た目をそろえるためだけにdownloadを付けないでください。ページを読む操作と、ファイルを端末へ残す操作は、利用者にとって別の行動です。

属性の値は保存時のファイル名を提案する

downloadへ値を入れると、ローカルファイルとして保存するときの既定名を提案できます。

<a href="/files/guide.php?id=42" download="service-guide-2015.pdf">
  サービス案内を保存する
</a>

この仮例では、配信URLがguide.php?id=42でも、保存名としてservice-guide-2015.pdfを提案します。空のdownload属性なら、保存名はURLやHTTP応答などを基にuser agentが決めます。

属性値は確定したファイル名ではありません。利用者の環境で使えない記号は、user agentが調整することがあります。拡張子も含め、配信する内容と一致する分かりやすい名前を指定してください。

Content-Dispositionをサーバー側の指示として扱う

ファイルのHTTP応答にContent-Dispositionがあり、attachmentとファイル名が指定されている場合は、その応答が保存方法とファイル名の判断に使われます。HTMLだけを編集できる担当者と、サーバーのheaderを設定する担当者が異なるなら、両方の指定を確認します。

たとえば、会員画面で生成するPDFや、URLから種類を判別しにくいファイルでは、サーバー側で次のような応答を返す方法があります。

Content-Disposition: attachment; filename="service-guide-2015.pdf"
Content-Type: application/pdf

download属性の提案名と、Content-Dispositionのファイル名を別々に変更すると、同じファイルに複数の名前が生まれます。名称の正本を決め、HTMLとサーバー設定を一緒に確認してください。

別originのファイルは属性だけで判断しない

リンク元と保存対象が別originにある場合、HTML5の仕様は、download属性とContent-Disposition: attachmentを組み合わせるよう求めています。利用者が意図しない別siteの情報を保存させられる危険を避けるためです。

外部のファイル配信サービスや別domainの保管先を使うなら、次の三者を分けて確認します。

browserごとの動作を推測で決めず、実際の配信URLで試します。特定のbrowserだけを前提にする場合も、対象と確認結果を記録してください。

保存リンクと公開制御を分ける

download属性を付けても、URLを知る人からファイルを隠すことはできません。公開してよい資料か、認証が必要な資料かは、配信前にサーバー側で判断します。

制作を委託する場合は、ファイルの保管場所、公開範囲、配信header、表示するリンク文、保存名、差し替え担当を引き渡し条件にします。HTMLの実装を任せても、どの資料を誰へ配信するかを決める責任はsite側に残ります。

最初の一手は、保存させたいファイルを一件選び、実際のURLとHTTP応答を確認することです。同じoriginならdownloadを付けて保存名を試し、別originなら配信側のContent-Dispositionまで確認してください。