勉強したことのメモ

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

  関連記事

モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法

モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィン ...

Leafletでマーカーをグループ化し、チェックボックスの状態により表示非表示を切り替える方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

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

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

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...

JavaScriptでbodyタグ内に特定のClass要素が追加された際イベントを発火させる方法

ASPを使用したサイトでページ内に特定のClass要素が追加された際にJSでイベ ...