【JavaScript】ボタンクリックでファイルをダウンロードする

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptを使ってボタンクリックでファイルをダウンロードする方法をご紹介しています。

ボタンクリックでファイルをダウンロードする処理を作りたいんだけど、どうすればいいんだろう?

上記の疑問にお答えします。

では、解説していきます。

ファイルダウンロードのテンプレート

下記はJavaScriptでファイルをダウンロードする際に多くの場面で使われているテンプレートです。上から4行目のData URI schemeにデータを埋め込むことで指定したファイルのダウンロードが可能となります。

//a要素を生成
let element = document.createElement('a');
//a要素のhref属性を設定
element.href = 'Data URI scheme';
//a要素のdownload属性を設定
element.download = 'sample.png';
//a要素のtarget属性を設定
element.target = '_blank';
//a要素のクリック実行
element.click();

Data URI schemeには下記のような値を指定することができます。

ファイル名Data URI scheme
JPEGdata:image/jpeg;base64, xxxxxxxxxx
PNGdata:image/png;base64, xxxxxxxxxx
GIFdata:image/gif;base64, xxxxxxxxxx
PDFdata:image/pdf;base64, xxxxxxxxxx

xxx~の部分にはbase64でエンコードされた文字列を指定します。ネット上でbase64変換等を調べると、多くの方からジェネレータが提供されています。ファイルをアップロードするだけで変換してくれますので、よかったら検索して試してみてください。

ボタンクリックでファイルをダウンロードする

前項の内容を参考に、ボタンクリックでファイルをダウンロードする処理を作成してみます。ここではPNG画像をダウンロードするようにしたいと思いまます。

HTML

<button type="button" class="btn">ダウンロード</button>

JavaScript

const btn = document.querySelector('.btn');
const data = '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';

btn.addEventListener('click',()=>{
    
    //a要素を生成
    let element = document.createElement('a');
    //a要素のhref属性を設定
    element.href = 'data:image/png;base64,' + encodeURI(data);
    //a要素のdownload属性を設定
    element.download = 'sample.png';
    //a要素のtarget属性を設定
    element.target = '_blank';
    //a要素のクリック実行
    element.click();
    
}, false);

実行結果は下記の通りです。ダウンロードをクリックすると、笑顔がナイスな男性の画像をダウンロードすることができます。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

これでボタンクリックで予め指定したファイルのダウンロードが可能となります。

最後に

ファイルのダウンロードでよく使われるのは、テキストファイル、画像ファイル、PDFファイルです。この3点のダウンロードの提供方法を把握しておけばクライアントの要望に応えられるケースが多いです。Webサイトからファイルをダウンロードする場合、基本的にa要素に直接指定することが多いため、JavaScriptでファイルのダウンロード処理を実装することはあまりないですが、動的に生成するファイルのダウンロード時に役立ちますので、一連の流れを覚えておくと良いかもしれませんね。

以上、JavaScriptを使ってボタンクリックでファイルをダウンロードする方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら