勉強したことのメモ

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

  関連記事

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...

JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法

あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...

金融機関コード(銀行番号)や支店コード(支店番号)から銀行名や支店名を取得する方法

金融機関コード(銀行番号)や支店コード(支店番号)をから銀行名や支店名を取得した ...

javascriptでHTML内に関数を書きたい場合

ダイアログ確認したいだけでわざわざfunctionを書くのもアレだという時に使い ...

Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...