用途
新着
履歴
分類

HTML5 ダウンロードボタン

HTML5 ダウンロードボタン
HTML5であればaタグに、download属性を書くだけでダウンロードボタンが作れます。

下記の画像をダウンロードしたいとき、右クリックで保存するのが一般的ですが、サイトの都合によってボタンを押したときにダウンロードが始まるようにしたい場合があります。

下記のリンクをクリックするとダウンロードが始まります。

ダウンロード

ソースはこちら

<a href="https://www.kipure.com/shared/api/my/dl_img/?img=/img/demo/cat/001.jpg" download="cat.jpg" class="demo_btn">ダウンロード</a>

ただし、この制御は同じドメイン内のコンテンツのみ有効です。

他人のサイトのコンテンツを勝手にダウンロードさせるのは、お薦めではないということですね。

そして、リンク先をよくみると画像をそのまま表示していません。

さらにdownload属性はsafariではまだ実装されていないようで、上記ではリンク先にてダウンロードさせるPHPをかましています。

PHPでは、ファイルの有無チェックをし、描画とContent-Disposition: attachmentに設定をし、添付ファイルの宣言を行なっています。

$file=filter_input(INPUT_GET,"img");

if(preg_match("/\.(jpg|png|gif)$/",$file)){
  header("Content-type: application/octet-stream");
  header("Content-Disposition: attachment; filename=\"$file\"");
  readfile($file);
  exit;
}
コード選択

しかしながらiPhone,Androidともにブラウザでは2019/3時点、対応していないようでダウンロードが始まらない状況でした。

ブラウザからローカルに保存させるということは、なかなか手間がかかるようです。

公開 2019-07-28 04:49:43
更新 2022-01-31 01:51:00
このページの二次元コード
HTML5 ダウンロードボタン

人気のサンプル

search -  category -  about
© 2024 kipure
Top