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

jQueryで画像ダウンロードボタンを実装 CSS
この記事は約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】

ダウンロード

SNSフォローボタン
エンデ・バタローをフォローする
CSSHTMLjavascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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