JavaScriptでファイルダウンロードを実現するための5ステップ

今回は、JavaScriptだけでファイルダウンロードを実現したので、その方法を紹介していくよ。

1,まずはHTMLを作成

まずは、ひな形となるhtmlファイルを作成する。今回はシンプルな構造でbodyにはaリンクのみ配置している。

<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Download Sample</title>
    </head>
    <body>
        <a href="#" id="download">Click Me!</a>
    </body>
</html>

2,addEventListenerを追加する。

次にaリンクに対して、javaScriptでaddEventListenerメソッドを追加する。(今回は、</body>の後にコードを追加)

.
.
</body>
<script>
  function downloadFile(e) {

}

document.getElementById('download').addEventListener('click',  downloadFile, false);
</script>

本来はhtmlとjavaScriptはファイル毎に分けるべきだが、今回はサンプルと言う事で一緒のファイルにまとめている。

また、downloadFile(e)関数の引数のeはイベントの要素自身を指している。(今回はaリンク。)

参考記事:EventTarget.addEventListener() - Web API | MDN

3, downloadFile()関数内にダウンロードに必要な処理を書き込む

いよいよdownloadFile()関数内に必要な処理を書き込んでいく。 まずは、この2行を書く。

 function downloadStart(e) {
  var content = 'simple is best';
  var blob = new Blob([content], {type: "text/plain"});
}

content変数にはファイルとして出力したい文字列を格納する。 2行目のnew Blobオブジェクトは、ファイルに似たようなオブジェクトを作成できるものであり、JavaScriptではFileオブジェクトと似たような働きをしてくれる。

参考記事:Blob - Web API | MDN

参考記事:File - Web API | MDN

Blobオブジェクトは第一引数は配列として格納し、第2引数以降はオプションで様々な設定ができる。

4,aリンクのhrefを書き換える

Blobオブジェクトでファイルっぽいオブジェクトを作成した後は、リンクのurlをBlobオブジェクトのurlに書き換える作業を行う。

 function downloadStart(e) {
  var content = 'simple is best';
  var blob = new Blob([content], {type: "text/plain"});

  e.target.href = window.URL.createObjectURL(blob);
}

URL.createObjectURL()メソッドを使い事で、引数(blob)のオブジェクトのURLを作成してくれるので、そのURLをリンクのURLに挿入している。

参考記事:URL.createObjectURL - Web API | MDN

5,ファイルとしてダウンロードできるようにする

ここまでの作業を経て実行してみると、リンクをクリックするとsimple is bestと言う画面が表示されて、上のアドレスバーのURLもdate:~に変わるはず。

しかし、きちんとファイルとしてダウンロードできるようにするためにも、aタグにdownloadと言うattributeを書き加えよう。

<a href="#" id="download" download>Click Me!</a>

このdownloadと言うattributeはhtml5から追加されたもので、リンク先をファイルとしてダウンロードできるようにしてくれるものだ。

参考記事:HTML a download Attribute

また、ダウンロードするファイル名を変更したい場合は以下の様に書くと良い。

<a href="#" id="download" download='text.txt'>Click Me!</a>

上記のコードで、text.txtと言うファイル名でダウンロードができるようになるはず。