darake Update: 2019-02-04

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"><span class="synUnderlined">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()関数内に必要な処理を書き込んでいく。まずは、この２行を書く。

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

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

参考記事：Blob - Web API | MDN

参考記事：File - Web API | MDN

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

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><span class="synUnderlined">Click Me!</a>

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

参考記事：HTML a download Attribute

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

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

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