知名度が低いウェブ標準ひとり Advent Calendar 2021 – 08 日目

今日は <a> で使える download 属性です。

基本的な使い方

通常 <a> のリンクをクリックすると画面遷移しますが download 属性を与えるとファイルをダウンロードするようになります。

<a href="report.pdf" download>報告書をダウンロード</a>

属性の値は空か、ダウンロードするファイル名の初期値を指定することもできます。

利用可能なもの、不可能なもの

何でもダウンロードさせられるわけじゃなくて、ちょっと制限があります。

  • 同一オリジンの URL
  • blob: な URL
  • data: な URL

他人のところのリソースをダウンロードさせることはできません。

使いどころ

素材集サイトで画像を開く代わりにダウンロードさせる、とか。でもプレビューも兼ねてユーザー側に任せてほしい気もする。

あと JavaScript から動的に生成したファイルをダウンロードさせる際には良さそう。

ファイル名を日付と時刻にする例

HTMLAnchorElement オブジェクトも対応する download プロパティを持つので、JavaScript からそれを設定してやりましょう。

elDownload.href = elCanvas.toDataURL('image/png');

const now = new Date();
elDownload.download = [
  now.getFullYear(),
  now.getMonth().toString().padStart(2, '0'),
  now.getDate().toString().padStart(2, '0'),
  now.getHours().toString().padStart(2, '0'),
  now.getMinutes().toString().padStart(2, '0'),
  now.getSeconds().toString().padStart(2, '0'),
].join('-') + '.png';

おしまい

昔はよく target="_blank" を付けてお茶を濁していたけれど、あれだと空のタブが残って邪魔だったりしたよね。ブラウザー側が気を利かせて自動で閉じてくれることもあるけど。

参考