知名度が低いウェブ標準ひとり Advent Calendar 2021 – 08 日目
今日は <a>
で使える download
属性です。
基本的な使い方
通常 <a>
のリンクをクリックすると画面遷移しますが download
属性を与えるとファイルをダウンロードするようになります。
<a href="report.pdf" download>報告書をダウンロード</a>
属性の値は空か、ダウンロードするファイル名の初期値を指定することもできます。
利用可能なもの、不可能なもの
何でもダウンロードさせられるわけじゃなくて、ちょっと制限があります。
- 同一オリジンの URL
blob:
な URLdata:
な 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"
を付けてお茶を濁していたけれど、あれだと空のタブが残って邪魔だったりしたよね。ブラウザー側が気を利かせて自動で閉じてくれることもあるけど。