{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/how-to-download-with-a-tag-without-file-server/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"5dc301e8-7edc-5f5d-a18b-6223ba578c3c","excerpt":"この記事はHTML5 Advent calendarの16日目の記事です。 HTML5からaタグにdownloadという属性が指定可能になったようです。 この属性が指定されたaタグは、href属性の値をブラウザで開くのではなく、リンク先をファイルとしてダウンロードします。 今までcanvas…","html":"

この記事はHTML5 Advent calendarの16日目の記事です。

\n

HTML5からaタグにdownloadという属性が指定可能になったようです。
\nこの属性が指定されたaタグは、href属性の値をブラウザで開くのではなく、リンク先をファイルとしてダウンロードします。

\n

今までcanvasで画像を生成した画像など、jsで生成したファイルをユーザに保存させるにはwindow.openにdata urlを渡して新窓で表示させ、ユーザに右クリ等で保存してもらう方法しか知らなかったのですが、
\naタグのdownload属性がまさにやりたいことドンピシャだったので備忘録を残します。

\n\n

デモ

\n

MDNにまさにドンピシャなデモがあったので、自作デモは割愛します。
\ncanvasで生成した画像を新窓ではなくファイルダウンロードさせるデモです。

\n

このとき、サーバに対して一切リクエストを飛ばしていないことがポイントです

\n

よいこと

\n\n

あたりが個人的に良いと思うところです。

\n

jsからaタグを生成し、ファイル名を指定してダウンロード

\n
function download(uri, filename) {\n  filename = filename || 'file';\n\n  var link = document.createElement('a');\n  link.download = filename;\n  link.href = uri;\n  link.click();\n}\n\ndownload('data://text/html,Hello world!!', 'dummy.html');
\n

のように、location.hrefなどと大差ないくらいの手軽さでサッと書けるのが魅力だと思います。
\nこれでフロントエンドだけで完結するアプリケーションがより作りやすくなりました。

\n

ブラウザ互換

\n

Can I useによると、IEとSafari(Mac、iOS）は最新版でも動きません。
\nChrome、Firefox限定のアプリケーションなどでは使用できそうです。
\nあと機種に依りそうですが、Androidのブラウザでは動作するようです。

","timeToRead":2,"frontmatter":{"title":"aタグのdownload属性でサーバを介さずにファイルダウンロードする","tags":["HTML5 Canvas"],"date":"December 15, 2015","featuredImage":null}}},"pageContext":{"slug":"/how-to-download-with-a-tag-without-file-server/","previous":{"fields":{"slug":"/how-to-disable-limitation-of-cors-in-html5-canvas/"},"frontmatter":{"title":"canvasのCORS制限を突破する","tags":["HTML5 Canvas","JavaScript","security"]}},"next":{"fields":{"slug":"/how-to-create-native-apps-with-fluid-from-web-apps/"},"frontmatter":{"title":"Fluidで任意のWebページをアプリ化する","tags":["Google Analytics","Mac"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}