勉強したことのメモ

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

  関連記事

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

Chart.jsで横スクロール可能なグラフを表示させる方法

Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラ ...

Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)

GoogleMapをズームする際にPCだと「Ctrl+スクロール」、スマホだと「 ...