こんにちは、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を使ってボタンクリックでファイルをダウンロードする方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

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

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