【JavaScript入門】ファイルのダウンロード処理を実装してみよう！

2024年3月1日

Kotono

みなさんこんにちは！Kotonoです。

今回はJavaScriptにおける「ファイルのダウンロード処理」について解説していきたいと思います。

この記事では

・ファイルのダウンロード処理とは
・ファイルのダウンロード処理を行う方法

などといった基本的な内容から

・ファイルのダウンロード処理の注意点
・その他のファイルダウンロード処理方法

など、より発展的な内容に関してもわかりやすく説明していきたいと思います。

ファイルのダウンロード処理とは

皆さんは、ウェブページ上で「ファイルのダウンロード」は日常的に行っていると思います。

ウェブページ上のリンクやボタンをクリックすると、ファイルをダウンロードをすることはしょっちゅうですよね。

今回はその「ファイルのダウンロード処理」をJavaScriptを用いて行う方法をご紹介したいと思います。

ファイルのダウンロード処理を行う方法

では、早速「ファイルのダウンロード処理」を行う方法を説明していきたいとおもいます。

ファイルのダウンロード処理を行う方法は、今回ご紹介する簡単なものばかりでなく、他にも様々な方法があります。

基本的な方法をつかんだ後は、ご自分で色々なテクニックを試行錯誤してみるのも、JavaScriptプログラミング上達の近道ですよ。

HTMLのみで行うファイルのダウンロード処理

ではまず最初に、HTMLファイル内の記述のみで「ファイルのダウンロード処理」を行う方法をご紹介します。

HTMLファイル内で処理が完結してしまうので、scriptタグや外部JSファイルなどは必要ありません。

以下のコードをご覧ください。

<html>
    <body>
        <a href="pics/2.jpg" download>
            <p>Click here to download!<p>
        </a>
    </body>
</html>

上のコードでは、HTMLファイルのアンカー（anchor）要素を作成し、そのhref属性にダウンロードされるファイルのリンク（パス）を指定しています。

そしてdownloadというキーワードを記述することによって、anchor要素のdownload属性を使用し、先ほど指定したファイルをダウンロードさせることが可能になります。

download属性はdownload = "hogehoge" などとも記述可能です。

hogehogeの部分は、ダウンロードされるファイルが保存される際に使用する名前です。

今回はhogehogeの部分は未設定なので、元のファイルの名前である2.jpgとして保存されます。

実際、上のコードを実行してみると、以下のようなページが表示されます。

リンクをクリックすると、picsフォルダ内に保存されている2.jpgという画像がダウンロードされます。

JavaScriptを使用するファイルのダウンロード処理

先ほどのサンプルコードでは、全ての処理がJavaScriptを使用せずに完結してしまっていました。

今回はJavaScriptを使用した、より柔軟性のある便利なコードをご紹介したいと思います。

以下のコードをご覧ください。

<html>
    <body>
        <script>
            function myfunc(filename, pathname){

                    var anchor = document.createElement('a');
                    anchor.download = filename;
                    var textnode = document.createTextNode("Click here to download!"); 
                    document.body.appendChild(anchor);
                    anchor.appendChild(textnode); 
                        anchor.href = pathname;
            }
            myfunc("myfile","pics/2.jpg");
        </script>
    </body>
</html>

上のコードでは、先ほどとは違って、scriptタグ内にすべての処理を記述しています。

ファイルをダウンロード処理を行うのはmyfuncという自作の関数です。

myfuncは引数を二つ要します。一つ目はダウンロードされるファイルを保存する際に使用するファイル名、二つ目はダウンロードされるファイルのパス名です。

myfunc内ではまず、変数anchorにcreateElementメソッドを使用して作成したanchor要素を格納しています。

作成したばかりのanchor要素のdownload属性に第一引数を指定することによって、ダウンロードされるファイルを保存する際に使用する名前を設定することが出来ました。

そして、クリックするためのリンクを作成するためにテキストノードを作成し、それをanchor要素の子ノードとしてappendChildメソッドを使用し、追加します。

最後に、anchor要素のhref属性に第二引数のパス名を指定し、ダウンロードされるファイルの指定が完了しました。

myfuncの呼び出しは、第一引数にmyfile、第二引数にpics/2.jpgと指定しました。

上のコードを実行すると、先ほどと全く同じウェブページが表示されます。

しかし、今回はmyfuncの引数であるファイル名とパス名を呼び出し時に自由に変更することができるので、より柔軟性のあるコードが完成しました。