.innerHTML

JavaScriptの.innerHTMLでaタグをクリックで画像をダウンロード

2022年8月19日 5分

今回は、複数の要素にHTMLの download属性をJavaScriptで追加をして、クリックしたら画像をダウンロードできるボタンを作ってみます。

要素同士の距離が近い場合には、この記事のようなコードを書く必要はないと思いますが、要素が飛び飛びで数が多い場合にこんなコードを使ってみるのもアリかと思います。

是非、最後までご覧ください。

.innerHTML
クリックで画像をダウンロードできるサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.innerHTML

JavaScriptの .innerHTML は、要素内の HTML を取得・設定するプロパティです。

const text = el.innerHTML;

この記事では、設置した要素のHTMLを取得して、それを分割してタイプライター風にテキストを表示させます。

クリックで画像をダウンロードできるサンプル

早速サンプルです。

a タグでできたボタンが4つ並ぶレイアウトで、各ボタンをクリックすることでそれぞれの画像をダウンロードできます。

坂本龍馬さんのイラスト

プロポーズをする男性

近藤勇さんのイラスト

お地蔵さんのイラスト

かかかず

ダウンロードしたイラストは、全て「sample」のファイル名です。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。

HTMLを記述

まずはじめに、HTMLを記述します。

コードを表示

<div class="btn">坂本龍馬さんのイラスト</div>
<div class="btn">プロポーズをする男性</div>
<div class="btn">近藤勇さんのイラスト</div>
<div class="btn">お地蔵さんのイラスト</div>

JavaScriptを記述

次にJavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// class名が.btnの要素を全てnodeで取得
const btn = document.querySelectorAll('.btn');

// 取得したnodeの数でループを回す
for (var i = btn.length - 1; i >= 0; i--) {
// .btnの中の要素をそれぞれ取得
const btnText = btn[i].innerHTML;
// a タグを挿入する時のURLの指定
btn[0].href = encodeURI('https://dubdesign.net/wp-content/uploads/2022/03/yroumasan.png');
btn[1].href = encodeURI('https://dubdesign.net/wp-content/uploads/2022/03/プロポーズの人.png');
btn[2].href = encodeURI('https://dubdesign.net/wp-content/uploads/2022/03/kondohsan.png');
btn[3].href = encodeURI('https://dubdesign.net/wp-content/uploads/2022/03/お地蔵さま.png');

// ダウンロードした時のファイル名
btn[i].download = 'sample.png';

// 出力
btn[i].innerHTML = '<a class="changeH" href="' + btn[i].href + '" download="' + btn[i].download + '">' + btnText + '</a>';
　　}

CSSを記述

最後に、CSSを記述して見た目を整えて完了です。

コードを表示

.btn {
    display: flex;
    align-items: center;
}
a.changeH {
    text-decoration: none;
    margin: 0 auto;
    display: block;
    position: relative;
    padding: 18px 25px 16px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #f0db40;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    letter-spacing: 0.04rem;
    line-height: 1;
    border: solid 2px #707070;
}
a.changeH:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

かかかず

これで完成です！

ざっくりとしたコードの解説

コードは、HTMLの「ダウンロードボタンにする4つの div タグ」と、JavaScriptの「ダウンロードボタンにするループと処理」。そして、「見た目を整える」CSSの3種です。

順に解説していきます。

HTML

HTMLは、class名に「btn」をつけた div タグを4つ並べ、それぞれ異なる文字列を記載しています。

<div class="btn">坂本龍馬さんのイラスト</div>
<div class="btn">プロポーズをする男性</div>
<div class="btn">近藤勇さんのイラスト</div>
<div class="btn">お地蔵さんのイラスト</div>

JavaScriptでは、この「btn」のclass名を取得して処理を行なっていきます。

JavaScript

JavaScriptはそれぞれの行毎にコメントアウトで処理内容を解説していますが、大きく言うとまずはじめに「btn要素を全て取得」して、「a タグを挿入」「出力」の3種類です。

// class名が.btnの要素を全てnodeで取得
const btn = document.querySelectorAll('.btn');

// 取得したnodeの数でループを回す
for (var i = btn.length - 1; i >= 0; i--) {
// .btnの中の要素をそれぞれ取得
const btnText = btn[i].innerHTML;
// a タグを挿入する時のURLの指定
btn[0].href = encodeURI('https://dubdesign.net/wp-content/uploads/2022/03/yroumasan.png');
btn[1].href = encodeURI('https://dubdesign.net/wp-content/uploads/2022/03/プロポーズの人.png');
btn[2].href = encodeURI('https://dubdesign.net/wp-content/uploads/2022/03/kondohsan.png');
btn[3].href = encodeURI('https://dubdesign.net/wp-content/uploads/2022/03/お地蔵さま.png');

// ダウンロードした時のファイル名
btn[i].download = 'sample.png';

// 出力
btn[i].innerHTML = '<a class="changeH" href="' + btn[i].href + '" download="' + btn[i].download + '">' + btnText + '</a>';
　　}

単に、JavaScriptを使わずにHTMLで href を記述すればいいだけの話ですが、全てのダウンロードするURLをJavaScriptのコードの中にまとめられるので、数が多い時の管理やメンテは容易です。

かかかず

最後の行にある .innerHTML をいじれば a タグ以外でも出力可能ですね。

CSS

CSSは、親要素のdivタグに「flex」をあてて、JavaScriptで挿入する a タグの色やフォントサイズ等々にスタイルをあて、見た目を整えています。

.btn {
    display: flex;
    align-items: center;
}
a.changeH {
    text-decoration: none;
    margin: 0 auto;
    display: block;
    position: relative;
    padding: 18px 25px 16px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #f0db40;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    letter-spacing: 0.04rem;
    line-height: 1;
    border: solid 2px #707070;
}
a.changeH:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

かかかず

主にボタン周りのコードが多いです。