[HTML5] リンク先のファイルを超簡単にダウンロード指定する – download属性

なんとa要素にdownload属性を追加するだけで、ページ(ファイル)を表示するのではなく、Webブラウザにファイルを保存するかダイアログを表示させダウンロードを促すことが可能です。

<a href="foo.txt" download>foo</a>

download属性にファイル名を指定すれば、デフォルトのファイル名として利用できます。

<a href="foo.txt" download="bar.txt">foo</a>

以下から実際にお試しいただけます。

動作条件

対応ブラウザ

Can I UseによるとIE以外の主要なブラウザはほぼ対応しているようです。

発動しない場合

• ダウンロード元とダウンロード先のファイルが同じオリジンでない場合
• ローカルのファイルをそのまま開いた場合
• FireFoxの場合、SSLでない場合

その他

Data URI Schema版

こちらも問題なく動きます。同様にschemaがblobの場合も動作します。

<a href="data:text/plain,Hello%2C%20World!" download="hello.txt">Hello</a>

Canvasをダウンロード

Data URI Schemaが行けるということは、canvasのダウンロードも行けるということですね。例えば以下のようなHTMLがあったとします。

<canvas id="board" width="300" height="100"></canvas>
<a id="dl-link" href="" download="canvas.png">ダウンロード</a>

次のJavaScriptでaタグをクリックした際にcanvasの内容をtoDataURL()でPNG形式のData URI Schemaに変換し、aタグのhref属性にツッコむだけです。

document.querySelector('#dl-link').addEventListener('click', (e)=>{
  const canvas = document.querySelector('#board')
  e.target.href = canvas.toDataURL()
})

以下からサンプルが試せます。

Safariの挙動

Safari14.1の場合、ファイルをどこに保存するかダイアログが表示されません。以下のダイアログで「許可」ボタンをクリックすると問答無用で「ダウンロード」フォルダへ保存されます。

ユーザーがびっくりする可能性があるので何か注意書きをして置いた方が良いかもしれませんね。

参考ページ

• <a>: アンカー要素 – HTML: HyperText Markup Language | MDN
• Download attribute – Can I use

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -