読者です 読者をやめる 読者になる 読者になる

daiizの自由帳

フレンチフライ トリュフ塩仕立て

aタグでファイルをdownloadする

chrome web-components tech

chromeではaタグのdownload属性を用いてファイルをダウンロードさせることができるようです。

f:id:daiiz:20140925231645p:plain

基本

<a href="image.png" download="icon.png">ファイルをダウンロード</a>

このリンクをクリックすると、hrefで指定したimage.pngがdownload属性で指定したファイル名icon.pngでダウンロードされます。

応用

chrome拡張機能などでプログラムが生成したテキストファイルをダウンロードする方法
ユーザーデータのエクスポートなどに使えそうです。まず、土台となるHTMLソースはこちらです:

<a href="#" download="myData" id="export">ファイルをダウンロード</a>

このaタグにたいして、以下のJavaScriptを実行します。

var txt = "任意のテキスト";
var blob = new Blob([ txt ], { type: "text/plain" });
var url = window.webkitURL.createObjectURL(blob);
document.getElementById("export").href = url;

これで、ユーザーがリンクをクリックしたときにテキストファイルmyData.txtのダウンロードが始まります。

スポンサーリンク

おまけ

「応用」でご紹介した方法を、もっとお手軽に実行するために、Web Component「a-download」をつくりました。必要なリソースをインポートしたうえで以下のようにHTMLを記述すると、「応用」と全く同じことができます。

<a-download filecontent = "任意のテキスト"
               filename = "myData"
              extension = "txt">ファイルをダウンロード
</a-download>

デモ

デモはこちらで公開しています。どうぞお試しください。: a-download v1

ソースコード

ソースコードはこちらで公開しています。どうぞご利用ください。:

https://github.com/daiz713/my-custom-elements/tree/master/a-download

filecontent属性の内容が更新されると、ダウンロードされるファイルも同時に更新される仕様になっています。

また、extension(拡張子)属性には、現時点ではtxtmdを指定することができます。今後、jpggifpngといった画像ファイルやzipなども扱えるようにしていきたいなと思っています。