HTMLのダウンロード属性の使い方を詳しく解説

藏色散人
リリース: 2018-09-01 14:36:28
オリジナル
9260 人が閲覧しました

Web 上のリソースを検索するときにファイルや画像をクリックしてダウンロードするのは日常的な操作です。では、独自の HTML ページをデザインするときに、他の人にファイルをダウンロードさせる機能を実装する必要がある場合、どうすればよいでしょうか?実際、この関数の実装はそれほど複雑ではなく、非常に簡単です。この記事では、aタグのdownload属性について詳しく紹介します。この属性をマスターすれば、クリックしてファイルや画像をダウンロードするなどの機能を実現できます。

a タグのダウンロード属性を使用した簡単な HTML コードの例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML a标签download属性使用示例</title>
</head>
<body>
<p>给a标签添加了download属性:</p>
<a href="/test/img/2.png"  download="2.png">点击下载</a>
</body>
</html>
ログイン後にコピー

ローカルでテストした結果は次のとおりです:

HTMLの<a>ダウンロード属性の使い方を詳しく解説

図に示すように、Firefox を使用してアクセスしました。ブラウザでダウンロードすると成功しました。画像をダウンロードして開きます。自分でテストしてみると、ダウンロード属性についてはすでに理解できると思います。ここでの a タグの href の値は、ダウンロードするファイルまたは画像のアドレスを示します。 download の値は、ダウンロードして保存するファイルまたは画像の名前を示します。

ただし、HTML の download 属性はすべてのブラウザーで機能するわけではないことにも注意する必要があります。現在、ダウンロード属性は Firefox と Google Chrome でのみ使用できます。 IE、Safari、Operaなどの残りのブラウザは役に立ちません。

要約すると、クリックしてファイルまたは画像をダウンロードしたい場合は、a タグの download 属性の使用法をマスターするだけで済みます。download 属性を使用せずに、href ファイルのアドレスを a タグに追加するだけです。すると、プレビュー効果のみが表示され、ダウンロードできません。

この記事は一定の参考価値があるので、困っている友達に役立つことを願っています!


以上がHTMLのダウンロード属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート