【JavaScript入門】ファイルダウンロード処理を実装する方法とは?

こんにちわ、フリーランスエンジニア兼ライターのワキザカ サンシロウです。

あなたは、ファイルダウンロード機能を作ったことがありますか?Word、Excel、PowerPoint、PDFなどダウンロードが必要になるケースは多岐にわたりますよね。

そこで今回は、download属性を使ったダウンロード方法という基本的な内容から、

  • FileApiのBlobを活用したダウンロード方法
  • ボタンクリックでダウンロードする方法

など応用的な内容も含め、ファイルダウンロード機能の作り方について徹底的に解説します!

download属性でダウンロードする方法とは

まずはじめに、一番簡単なHTML5でダウンロードする方法について説明します。

HTMLで次のようなコードを書くと、ファイルをダウンロードするリンクを作ることができます。

<a href="img/test.png" download="test.png">ダウンロード</a>

ファイルをダウンロードするリンクにdownload属性を追加してダウンロードできるようにしています。「img/test.png」がファイルパスで、「test.png」ダウンロード時のファイル名です。

ファイルをダウンロードするだけであれば、この方法で簡単にダウンロードできるので覚えておくと便利ですよ。

Blobを使ってテキストで入力したデータをダウンロードする方法とは

次に、テキストで入力したデータをダウンロードする方法について説明します。FileApiの「Blobを使えば、テキストで入力した文字をテキストファイルとしてダウンロードすることができます。

こちらもよく使う方法なので、HTML5のdownload属性とあわせて覚えておくのがおすすめです。

    <input type="text" id="txtData" />

    <br />

    <script type='text/javascript'>
        function handleDownload() {

            //テキストボックスの値を取得
            var txtData = document.getElementById("txtData").value;

            //ファイルタイプ、保存するテキストを指定してblobを作成
            var blob = new Blob([ txtData ], {
                "type" : "text/plain"
            });

            //ファイルをダウンロード
            if (window.navigator.msSaveBlob) {
                window.navigator.msSaveBlob(blob, "test.txt");

                // msSaveOrOpenBlobの場合はファイルを保存せずに開ける
                window.navigator.msSaveOrOpenBlob(blob, "test.txt");
            } else {
                document.getElementById("download").href = window.URL.createObjectURL(blob);
            }
        }
    </script>

    <a id="download" href="#" download="test.txt" onclick="handleDownload()">ダウンロード</a>

blobでテキストタイプ、テキストボックスで入力した値(txtData)を使ってデータを作成し、ファイルを保存しています。

サンプル紹介

最後に、すぐに使えるサンプルコードを用意しました。

※download属性を利用したaタグの「img/test.png」「test.png」の部分のみ利用環境に合わせて変更いただければ、そのままご利用できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ダウンロードテスト</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>

    <a href="img/test.png" download="test.png">HTML5のdownloadでダウンロード</a><br />

    <br/><br/>


    <input type="text" id="txtData" />

    <br/>

    <script type='text/javascript'>
        function handleDownload() {

            //テキストボックスの値を取得
            var txtData = document.getElementById("txtData").value;

            //ファイルタイプ、保存するテキストを指定してblobを作成
            var blob = new Blob([ txtData ], {
                "type" : "text/plain"
            });

            //ファイルをダウンロード
            if (window.navigator.msSaveBlob) {
                window.navigator.msSaveBlob(blob, "test.txt");

                // msSaveOrOpenBlobの場合はファイルを保存せずに開ける
                window.navigator.msSaveOrOpenBlob(blob, "test.txt");
            } else {
                document.getElementById("download").href = window.URL.createObjectURL(blob);
            }
        }
    </script>

    <a id="download" href="#" download="test.txt" onclick="handleDownload()">入力したテキストをダウンロード</a>

</body>
</html>

まとめ

今回は、ファイルダウンロード機能の作り方についてご紹介しました。WEBアプリを作る場合、ファイルのダウンロード機能を使うケースは多いです。

今回説明した方法はどれも簡単に使うことができるので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

北海道出身の30歳で、フリーランスエンジニア兼テックライターとして活動中。新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。

Webアプリ、業務アプリ開発において、要件定義 ~ 運用保守まで様々な経験あり。また3歳の娘がいる1児のパパで、日々娘との時間を確保するために仕事を頑張っています!

侍エンジニアでは、【誰でもわかるレベルのわかりやすさ】を意識して、記事を執筆中。

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー