【JavaScript】Download機能の実装 aタグのdownload 属性とDOM操作で実装する

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptでDownload機能の実装 aタグのdownload 属性とDOM操作について解説していきます。

1 HTMLのaタグのdownload属性でDownload機能を実装する
2 DOM操作(JavaScript)でDownload機能を実装する
3 SampleCode全文 & HTML実行イメージ
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 Twitterやってます！Follow Me！
7 参考・引用
8 最近の投稿

HTMLのaタグのdownload属性でDownload機能を実装する

HTML5 では aタグに download 属性が追加されました。

download 属性が設定された a タグをクリックした場合、

ブラウザはユーザーをそのコンテンツのページに移動するのではなく、コンテンツをファイルに保存(Download)します。

つまり、download属性を付与すると、href属性に設定したFilePathにあるFileをDownloadするLinkになります。

また download 属性に名前を設定すると、その名前でFileをDownloadするLinkになります。

aタグに「download」属性を付与する2パターン

<!-- 1. download属性を付与すると、hrefに設定したFilePathにあるFileをDownloadするLinkになる -->
<a href="./robotama.jpg" download>ぷるぷるロボ玉🔥</a>


<!-- 2. download属性に名前を設定すると、その名前でFileをDownloadするLinkになる  -->
<a href="./robotama.jpg" download="purupuru-robotama.jpg">ぷるんぷるんロボ玉🔥</a>

SampleCodeは、次のとおりです。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download-Test🔥</title>
</head>
<body>
    <h1>Download-機能を実装するロボ玉🔥</h1>

    <h1>ぷるぷるロボ玉をDownloadするぜ🐹</h1>
    
    <h2>
        <!-- 1. download属性を付与すると、hrefに設定したFilePathにあるFileをDownloadするLinkになる -->
        <a href="./robotama.jpg" download>ぷるぷるロボ玉🔥</a>
        <!-- 「 robotama.jpg 」と言う名前で Downloadされる  -->
    </h2>

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

    <h3>リソースまでのファイルのパスをしっかりと指定するのがポイント🔥</h3>

    <h2>
        <!-- 2. download属性に名前を設定すると、その名前でFileをDownloadするLinkになる  -->
        <a href="./robotama.jpg" download="purupuru-robotama.jpg">ぷるんぷるんロボ玉🔥</a>
        <!-- 「 purupuru-robotama.jpg 」と言う名前で Downloadされる  -->
    </h2>

    <h3>download="別名" という形で、Download時の名前を設定することができます🔥</h3>

</body>
</html>

DOM操作(JavaScript)でDownload機能を実装する

DOM操作でDownload機能を動的に作成することももちろん可能です。

次のSampleCodeでは、JavaScriptのDOM操作でDownload機能を実装しています。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download-Test🔥</title>
</head>
<body>
    <h1>Download-機能を実装するロボ玉🔥</h1>

    <h1>ぷるぷるロボ玉をDownloadするぜ🐹</h1>

    <script>

        function DownloadFunc(fileName, filePath){

            // 1. aタグを作成する
            const anchor = document.createElement('a');

            // 2. 「 download=fileName 」の属性情報を aタグに追加する
            anchor.download = fileName;
            
            // 3. Textを作成する
            const textnode = document.createTextNode("Download Robotama🐹"); 

            // 4. HTML-Body に一番最後の要素に、aタグを追加する
            document.body.appendChild(anchor);

            // 5. Textを aタグに追加する
            anchor.appendChild(textnode);

            // 6. href属性に、FilePathをSetする
            anchor.href = filePath;
        }

        DownloadFunc("GunmaRobotama","./robotama.jpg");
    </script>
</body>
</html>

SampleCode全文 & HTML実行イメージ

SampleCodeの全文を掲載しておきます。

実行すると、3つのDownload-Linkがあるので、それぞれ実行すると、名前が違う画像ファイルをDownloadできます。

今回は、すべて『No Change No Life I/O』のマスコットキャラクター『ロボ玉』の画像をDownloadするようになっています。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download-Test🔥</title>
</head>
<body>
    <h1>Download-機能を実装するロボ玉🔥</h1>

    <h1>ぷるぷるロボ玉をDownloadするぜ🐹</h1>
    
    <h2>
        <!-- 1. download属性を付与すると、hrefに設定したFilePathにあるFileをDownloadするLinkになる -->
        <a href="./robotama.jpg" download>ぷるぷるロボ玉🔥</a>
        <!-- 「 robotama.jpg 」と言う名前で Downloadされる  -->
    </h2>

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

    <h3>リソースまでのファイルのパスをしっかりと指定するのがポイント🔥</h3>

    <h2>
        <!-- 2. download属性に名前を設定すると、その名前でFileをDownloadするLinkになる  -->
        <a href="./robotama.jpg" download="purupuru-robotama.jpg">ぷるんぷるんロボ玉🔥</a>
        <!-- 「 purupuru-robotama.jpg 」と言う名前で Downloadされる  -->
    </h2>

    <h3>download="別名" という形で、Download時の名前を設定することができます🔥</h3>


    <h3>参考・引用</h3>
    <ol>
        <li>
            <a href="https://javascript.keicode.com/newjs/download-files.php" target="_blank">ファイルをダウンロード保存する方法</a>
        </li>

        <li>
            <a href="https://www.keicode.com/script/html5-download.php" target="_blank">HTML5 a タグの download 属性</a>
        </li>
    </ol>

    <script>

        function DownloadFunc(fileName, filePath){

            // 1. aタグを作成する
            const anchor = document.createElement('a');

            // 2. 「 download=fileName 」の属性情報を aタグに追加する
            anchor.download = fileName;
            
            // 3. Textを作成する
            const textnode = document.createTextNode("Download Robotama🐹"); 

            // 4. HTML-Body に一番最後の要素に、aタグを追加する
            document.body.appendChild(anchor);

            // 5. Textを aタグに追加する
            anchor.appendChild(textnode);

            // 6. href属性に、FilePathをSetする
            anchor.href = filePath;
        }

        DownloadFunc("GunmaRobotama","./robotama.jpg");
    </script>
</body>
</html>