【jQuery】画像などのファイルダウンロードボタンを実装

jQueryで画像ダウンロードボタンを実装
この記事は約2分で読めます。

ダウンロードボタンを押すと画像がデスクトップに自動保存するボタンの実装方法についてまとめました。
昨日書いた記事で画像のダウンロードボタンを作った際に、「これは忘れそう!」っと思い記事にしました。

【HTML】
  <a class="download-btn" href="画像URL">ダウンロード</a>
【CSS】
  .download-btn {
    display: block;
    width: 100%;
    height: 70px;
    padding: 20px 0;
    margin: 30px 0;
    background: #10ebbd;
    border-radius: 8px;
    color: #606060;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 7px 16px -6px rgba(0,0,0,.3);
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
  }
  .download_btn:hover {
    opacity: .5;
  }
【jQuery】
$(function() {
  $('.download_btn').on('click', function(e){
    var href_url = $(this).attr('href');
    var href_name = $(this).attr('href').replace(/\\/g,'/').replace( /.*\//, '' );
    $(e.target).attr({
      download: href_name,
      href: href_url
    });
  });
});
【DEMO】

ダウンロード

javascriptjQuery

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました