勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法

  JavaScript

ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをクリック時に全ての画像をまとめてダウンロードさせたい。PHPが利用可能な環境であればZIPファイル化の上、ダウンロードさせる形を取るがASPを利用したサイトのためPHPが利用不可だった。そのためJavaScriptでの対応方法を以下にメモ。

 

サンプル

https://taitan916.info/sample/js_download/

画像をクリックすると個別にダウンロード、「一括ダウンロード」ボタンをクリックすると全画像がダウンロードできる筈。

 

ソースコード

<div>
    <a href="001.jpg" class="img" download>
        <img src="001.jpg">
    </a>
    <a href="002.jpg" class="img" download>
        <img src="002.jpg">
    </a>
    <a href="003.jpg" class="img" download>
        <img src="003.jpg">
    </a>
</div>

<button id="download">一括ダウンロード</button>

<script>
document.querySelector('#download').addEventListener('click', function() {
    document.querySelectorAll('.img').forEach(function(e){
        e.click();
    });
});
</script>

 

所感

e.click()部分はjQueryのclickイベントだと動かなかったため、実装の際はバニラJSで対応すること。

 - JavaScript

  関連記事

SortableJSを使ってデータの並べ替え&保存

あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...

JavaScriptで後から追加した要素にイベントを割り当てる方法と挙動の違いについて

jQueryで後から追加した要素に対してイベントを割り当てる場合、いつもと異なる ...

JavaScriptでFlashのバージョンを取得する方法

Flashのバージョン取得をjavascriptで行うソースコードのを以下にメモ ...

「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法

「input type="number"」のテキストボックスに対して「2桁まで」 ...

JavaScriptのIntersectionObserverを利用して指定した要素が表示されているか確認する方法

ブラウザ上で指定した要素が表示されているかチェックし、表示されている場合は何らか ...