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

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

【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】

ダウンロード