HTML5 での download 属性の使用の簡単な分析

著者：Eve Cole 更新時間：2025-01-25 00:12:01

フロントエンドテクノロジの発展に伴い、フロントエンドでファイルのダウンロードを処理する必要があるビジネスシナリオがますます増えています。数ある方法の中でも、 <a>タグのdownload属性によるダウンロードが一般的で比較的簡単な方法です。

ダウンロード属性の紹介

従来の<a>タグでは、href によるリンクジャンプを実装していましたが、プレビューにジャンプせずにファイルをダウンロードするだけの場合は、 <a>タグにdownload属性を追加することで簡単にダウンロード操作を実現できます。。

download HTML5 の<a>タグの新しい属性です。この属性はダウンロード操作を強制的にトリガーし、ブラウザに URL に移動する代わりにダウンロードするよう指示し、ユーザーに URL をローカルファイルとして保存するように指示します。例えば：

 <a href=result.png download>ダウンロード</a>

download属性が欠落している場合、ダウンロードをクリックすると直接プレビュー画像に切り替わり、 download属性が追加されると画像のダウンロードがトリガーされます。

download属性の現在の互換性は caniuse に示されているとおりです。

ほとんどの主流ブラウザは基本的にdownload属性をサポートしていることがわかり、IE のパフォーマンスはこれまでと同様に優れており、現在でも多くの Windows システムが IE を使用しており、これは多くのビジネスが考慮する必要があることでもあります。この互換性の問題により、 downloadの幅広い用途が制限されます。

動的リソースのダウンロード

動的なコンテンツのダウンロード、つまり、画像などのリソースのアドレスが固定されていない (一部のオンライン描画ツールで生成された画像など) という一部のビジネスシナリオに直面すると、HTML を使用するだけではニーズを満たすことができません。さまざまな URL ダウンロードに対応するために、URL ダウンロードを動的にトリガーするメソッドを JS を通じて実装できます。

 function download(href, filename='') { const a = document.createElement('a') a.download = ファイル名 a.href = href document.body.appendChild(a) a.click() a.remove() }

コード内で作成された<a>に対して実行されるappendChildおよびremove操作は、主に FireFox ブラウザとの互換性を目的としており、FireFox ブラウザでこのメソッドを呼び出す場合、作成された<a>タグを追加しないことに注意してください。本文をクリックすると、リンクは何も行われず、ダウンロードがトリガーされますが、Chrome の場合はそうではありません。

以上の方法により、同一オリジンリソースのダウンロードが実現できます。ただし、多くのシナリオでは、クロスドメインリソースも処理する必要があります。残念ながら、 download属性は現在、同一オリジン URLにのみ適用されます。つまり、ダウンロードされるリソースアドレスがクロスドメインの場合、 download属性は無効になり、リンクをクリックするとナビゲーションプレビューに変わります。

テスト: クリックしてダウンロードします。結果はプレビューのみであり、画像はダウンロードできません。

注: Chrome 65 は以前、ファイルのクロスドメインダウンロードをトリガーするdownload属性をサポートしていましたが、その後は同一生成元ポリシーに厳密に従っており、 download属性を使用してクロスドメインリソースのダウンロードをトリガーできなくなりました。 FireFox は、クロスドメインリソースのdownload属性をサポートしていません。

ファイルの命名の問題

download属性はダウンロードをトリガーするだけでなく、ダウンロードファイル名も指定できます。

 <a href=test.png download=joker.png>ダウンロード</a>

ダウンロードしたファイルのサフィックスがソースファイルと一致する場合は、デフォルトのファイル名を設定できます。

 <a href=test.png download=joker>ダウンロード</a>

著者はかつて、 <a>タグを介してクロスドメインリソースのダウンロードをトリガーするという問題に遭遇しました。このコードは基本的に上記のダウンロードメソッドと同じですが、 download属性が設定される場所が若干異なります。

 a.setAttribute(ダウンロード、true)

その結果、古いバージョンのChromeブラウザでは以下のような状況が発生していました。

ダウンロードファイル名はtrueになります。当然のことながら、ブラウザはdownload属性値をファイル名として読み取ります。

分析の結果、上記の問題は主に次のことが原因であることがわかりました。

1. まず、 download trueに設定しないでください。download の属性値はdownload disabled名に直接関係します。このフロントエンドとバックエンドの応答型ダウンロード方法では、 download属性は必要ありません。

2. Chrome の初期バージョンでは、クロスドメインリソースのdownload属性がサポートされているだけでなく、 downloadを通じてクロスドメインリソースのファイル名がリセットされるため、上記の状況が発生しました。

フロントエンドとバックエンドが連携してファイルのダウンロードを完了するビジネスシナリオは、通常、バックエンドが応答ヘッダーにContent-Disposition情報を設定することによって実装されます。

HTTP シナリオでは、Content-Disposition の最初のパラメーターは、インライン (デフォルト値。応答内のメッセージ本文がページの一部またはページ全体として表示されることを示します) または添付ファイル (メッセージ本文が表示されることを意味します) のいずれかです。ローカルにダウンロードする必要があります。ほとんどのブラウザでは、「名前を付けて保存」ダイアログボックスが表示され、filename の値にダウンロードしたファイル名が事前に入力されます。

Content-Disposition応答ヘッダーに設定されており、フロントエンドが対応するリンクの<a>タグにdownload属性も追加する場合、このときの命名規則は次のとおりです。

HTTP ヘッダーの Content-Disposition 属性にこの属性とは異なるファイル名が割り当てられている場合、HTTP ヘッダー属性がこの属性より優先されます。

テストの結果、HTTP ヘッダーのContent-Dispositionが空ではないことが判明しました。

Chrome ブラウザでは、HTTP ヘッダーのContent-Dispositionの最初のパラメーターがattachmentまたはinline のどちらに設定されているかに関係なく、filename が設定されている限り、 download時にファイル名をリセットできません。逆に、filename が空の場合、 download属性値はファイル名に設定されます。 FireFox ブラウザでは、ブラウザはContent-Dispositionのファイル名の値のみを読み取ります。 filename が空の場合は、ソースファイル名が取得されます。現時点では、 downloadファイル名をリセットすることはできません。

要約すると、 Content-Disposition情報が応答ヘッダー (たとえば、通常はリソースを直接見つける同一生成元の URL) に設定されていない場合、 download属性によってファイル名がリセットされる可能性があります。バックエンドがContent-Dispositionフィールドにファイル名を設定している場合は、ファイル名の値が優先されます。

ファイル名がバックエンドで設定されている場合でも、ファイル名をリセットしたい場合はどうすればよいですか?

BLOB: URL

download属性の紹介もあります。

HTTP URL は同じオリジンにある必要がありますが、blob: URL と data: URL を使用すると、JavaScript を使用して生成されたコンテンツ (オンライン描画 Web アプリケーションを使用して作成された写真など) をユーザーが簡単にダウンロードできるようになります。

Blob (Binary Large Object) は、バイナリラージオブジェクトです。一部のデータベースでは、バイナリファイルを格納するフィールドタイプを表すために Blob が使用されます。 File インターフェイスも Blob に基づいており、Blob の機能を継承し、ユーザーシステム上のファイルをサポートするように拡張されています。 BLOB オブジェクトは、Blob コンストラクターを使用して作成されます。

BLOB(blobParts[, options])

 var debug = {hello: world};var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

単純なテキストまたは JS 文字列ファイルをダウンロードする必要がある場合は、テキスト情報を BLOB バイナリストリームに変換し、BLOB URL を生成し、 download属性を使用してダウンロードを完了できます。コードは次のとおりです。

 const downloadText = (text, filename = '') { const a = document.createElement('a') a.download = ファイル名 const blob = new Blob([text], {type: 'text/plain'}) // text は、ダウンロードする必要があるテキストまたは文字列コンテンツを指します a.href = window.URL.createObjectURL(blob) // blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf のような URL 文字列が生成されます document.body.appendChild(a) a.click() a.remove()}

この BLOB URL と一般的な HTTP URL の違いは何ですか?

Blob URL/Object URL は、Blob オブジェクトと File オブジェクトを画像やバイナリデータのダウンロードリンクなどの URL ソースとして使用できるようにする擬似プロトコルです。

ブラウザーは、 URL.createObjectURL()を通じて Blob または File オブジェクトへの特別な参照を内部的に作成します。生成された Blob URL は、ブラウザーの単一インスタンスおよび同じセッション内でのみ使用できます。また、この URL オブジェクトは、ページはブラウザによって終了します。

したがって、Blob URL はサーバーリソースを指すことができず、他のページで開くこともできません。同時に、エンコード形式の違いにより、Blob URL はデータ URL よりも占有するスペースリソースが少なく、パフォーマンスが優れています。

BLOB は、Web 開発に非常に便利な機能 (BLOB URL の作成) を提供します。バイナリデータを Blob オブジェクトにカプセル化し、 URL.createObjectURL()使用して Blob URL を生成します。Blob URL 自体は同一生成元 URL であるため、この URL をdownloadで使用して、ダウンロードと名前付けの問題を解決できます。クロスドメインリソース。

解決

Blob と Fetch を使用すると、クロスドメインとファイルの名前付けの問題を解決できます。fetch fetch使用してクロスドメインリソースを取得し、BLOB オブジェクトを返して BLOB URL を生成し、 <a>タグのdownload属性でダウンロードをトリガーします。コードは次のとおりです。

 function download(href, filename = '') { const a = document.createElement('a') a.download = ファイル名 a.href = href document.body.appendChild(a) a.click() a.remove() }function downloadFile(url, filename='') { fetch(url, { headers: new Headers({ Origin: location.origin, }), mode: 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) download(blobUrl, filename) window.URL.revokeObjectURL(blobUrl) })}

この時点で、もう一度 [ダウンロード] をクリックすると、クロスドメインイメージがローカルエリアに正常にダウンロードされます。

クロスドメインリソースが配置されているサーバーは、 Access-Control-Allow-Origin情報を使用して構成する必要があることに注意してください。構成されていないと、大文字のクロスドメインエラーが発生します。ヘッダー構成例:

 //任意のドメイン名にアクセスを許可 header('Access-Control-Allow-Origin: *'); // アクセスするドメイン名を指定します header('Access-Control-Allow-Origin: https://h5.ele.me) ');

この方法にはまだいくつかの欠点があり、たとえば、ブラウザーでは BLOB データのサイズが 500M までに制限され、パフォーマンスの面でも不十分です。

要約する

現在、フロントエンドには多くのダウンロード方法があり、 download属性のダウンロードは最も簡単な方法の 1 つですが、これらの機能のいくつかを注意深く検討すると、多くの有用な情報が得られる可能性があります。現在、 downloadブラウザの機能と密接に関係していますが、Microsoft 関係者もユーザーに IE download使用しないように勧めています。将来的には、アプリケーションの可能性はますます広くなるでしょう。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。