chromeではaタグのdownload属性を用いてファイルをダウンロードさせることができるようです。
基本
<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
ソースコード
ソースコードはこちらで公開しています。どうぞご利用ください。:
filecontent
属性の内容が更新されると、ダウンロードされるファイルも同時に更新される仕様になっています。
また、extension(拡張子)
属性には、現時点ではtxt
とmd
を指定することができます。今後、jpg
、gif
、png
といった画像ファイルやzip
なども扱えるようにしていきたいなと思っています。