HTML5 でのリソースのダウンロード - a[ダウンロード]
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Chrome で、HTML 仕様の a
要素の新しい download
属性がサポートされるようになりました。この属性を使用すると、参照先のリソースに移動するのではなく、ブラウザによってダウンロードされる必要があることを示します。
[リソースのダウンロード] で、次の操作を行います。
たとえば、次のリンクをクリックすると、href
値(download me)に移動するのではなく、.png が「MyGoogleLogo.png」としてダウンロードされます。マークアップは次のとおりです。
<a href="http://web-central.appspot.com/.../web-fundamentals-icon192x192.png" download="WebfundamentalsLogo">download me</a>
a[download]
の真のメリットは、blob: URL と filesystem: URL を操作する場合です。これにより、ユーザーはアプリ内で作成または変更したコンテンツをダウンロードできるようになります。
完全なデモ
上記の例では、画像のオリジンはウェブサイトに関して同じです。別のオリジンの画像のリンクを使用すると、リンクがダウンロード リンクではなく、ナビゲーション リンクとして機能しないことがあります。これは、多くのバージョンのブラウザで、クロスオリジン ファイルのダウンロード ポリシーがサポートされていないためです。たとえば、Chrome バージョン 65 より前ではクロスオリジン ファイルのダウンロードが許可されていましたが、それ以降のバージョンでは非推奨になりました。詳しくは、こちらをご覧ください。Content-Disposition
ヘッダーを使用すると、別のオリジンからのダウンロードを強制できます。
ブラウザのサポート: この属性をサポートしているのは、現在の Chrome デベロッパー チャンネル リリース(14.0.835.15 以降)のみです。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2011-08-01 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2011-08-01 UTC。"],[],[]]