先端はどのようにファイルのダウンロード機能を実現しますか?

記事の目次

フロントエンドはどうやってファイルダウンロード機能を実現しますか?

バックエンドと組み合わせて

を実現します.

二つの実施形態

第1種、サーバの静的リソースを直接ダウンロードする

第二種類、フロントエンドの参照、バックエンドの生成ファイル

実現構想:

長所短所

メリット

欠点

純先端

を実現しました.

データソース

構想を実現します.

第1ステップは、データを対応`data:URLs`または`blob:URL`

に生成する.

生成`data:URLs`

`BlobURLs`

を生成する.

第二ステップ、処理ダウンロード(またはエクスポート)方式

長所短所

メリット

欠点

先端はどのようにファイルのダウンロード機能を実現しますか?
どのようにファイルダウンロード機能を実現するかについては、実現された技術方式によって2つの種類に分けられます.

バックエンドと組み合わせて

を実現します.

純先端

を実現しました.
バックエンドと結合して実現
二つの実現方式
第一種類、直接サーバーの静的リソースをダウンロードします.
この方法で一番簡単なのはaラベルを使うことです.

<a href="URL">a>

他の方法は、form、iframe、location.href、window.open()、Content-dispositionのように、ここでは詳しく説明しない.
第二種類、フロントエンドの参照、バックエンドの作成ファイル
実現の考え方:
1、フロントエンドはデータまたはパラメータを送信してバックエンドに送る
2、バックエンドで受信したデータからファイルを生成したり、パラメータに基づいて対応するデータを検索してファイルを生成しています.
3、その後、応答要求ヘッダに設定する

Content-disposition：attachment；filename="fliename.fileType"

ファイルタイプ、ファイル名、ファイルコードなどの指定に使用します.MIME(コンテンツ・展開)はMIMEプロトコルタイプの拡張であり、MIMEプロトコルは、data:URLsユーザエージェントが追加ファイルをどのように表示するかを示す.
4、ブラウザは応答ヘッダを受信するとダウンロード動作をトリガします.
長所と短所
長所

は、パラメータに応じて異なるファイルを生成することができ、柔軟性が高い

.

は、大データ量または大ファイルのダウンロードを実現することができます.
欠点

ダウンロードが必要なのは、ユーザが生成したコンテンツ(オンライン作図など)またはコンテンツがすでにクライアントに戻っている場合、リソースと帯域幅の浪費を招く

である.
フロントエンドのみ実現
純粋なフロントエンドの実現にはバックエンドが必要ではないが、バックエンドのデータがフロントエンドに渡されている場合があります.ユーザーがダウンロードしたファイルの内容は既存のデータだけが必要です.この場合、フロントエンドを使用してファイルをダウンロードする機能を実現し、サーバーリソースと帯域幅の浪費を低減することができます.
データソース
1、バックエンドの戻り
2、ユーザー入力:オンライン作図、オンライン表入力
構想を実現する
二段階に分ける:
第1のステップは、データ生成ペアblob:URLsまたはdata:URLs第二ステップ、処理ダウンロード(またはエクスポートと呼ぶ)方式
第1のステップは、データ生成ペアblob:URLまたはdata:URLs生成data: URLsdata:は、プレフィックスURLのmediatype文字列であり、フォーマットは

data:[<mediatype>][;base64],<data>

MIME ， "image/jpeg JPEGは「text/plain;charset=US-ASCII画像ファイルを示す.
省略されると、デフォルト値はdata:URLsです.
どのようにデータをwindow.btoa()に変換しますか?
最初の種類は、テキストの種類に対して、直接データをつなぎ合わせることができます.
例

const dataURL = `data:text/plain;base64,` + textData

第二の方法は、btoa()を通じてFileReader.readAsDataURL(blob)関数は、バイナリデータの「文字列」をbase-64符号化ASCII文字列に作成します.
例

let str = new Blob(['some thing'])
console.log(btoa(str))  // W29iamVjdCBCbG9iXQ==
let dataURL = 'data:text/plain;base64,' + btoa(str) // data:text/plain;base64,W29iamVjdCBCbG9iXQ==

第三の方法は、Fileを通じてBlobまたはFileReader.readAsDataURL()オブジェクトについては、data:URLsの方法を用いてBlobURLsに変換することができる.
例

const blob = new Blob(['some thing'])
const reader = new FileReader()
reader.onloadend = function() {
  const dataUrl = is_chrome_ios 
  				  ? reader.result
                    : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;')
}
reader.readAsDataURL(blob)

生成blob: URLsURL.createObjectURL()は、DOMString静的方法によって生成されたURLであり、パラメータに与えられたオブジェクトを表すURL.createObjectURL()が含まれる.File方法は、BlobまたはblobURLsオブジェクトしか処理できないので、blobを生成するには、fileオブジェクトまたはBlobURLsオブジェクトにデータを変換しなければならない.
例

      File Blob  
const blob = new Blob([data][, MIMEType])
  BlobURLs
const BlobURL = URL.createObjectURL(blob)

作成されたURL.revokeObjectURL()は手動でを呼び出して廃棄する必要があります.そうでないと、ページが閉じられます.最適な性能とメモリの使用状況を得るために、安全なタイミングで自発的にそれらを解放してください.
第二ステップ、処理ダウンロード(またはエクスポートと呼ぶ)方式
第1の、downloadタグのhrefおよびdownloadタグのHTML5は、ブラウザがURLにナビゲーションしているのではなく、URL規格で追加された属性であるため、ユーザに対してローカルファイルとして保存するように促すことになる.また、download属性の値は、ダウンロードファイルの名前を指定することができる.hrefは、dataURLsおよびblobURLsの2つのタイプの値をサポートする.
例

<a download="filename" href="dataURLs BlobURLs">a>

第二の種類、location.hrefまたはwindow.open()この方法は、直接DataURLsまたはBlobURLsをブラウザのアドレスにアップロードしてダウンロードをトリガする方法である.

window.location.href = urls; //        
window.open(urls, '_blank'); //       

第三種類、msSaveOrOpenBlob（IE10+)これはIE特有の方法です.

navigator.msSaveOrOpenBlob(blob, fileName);

第四種類、iframe(IE <= 9)他のより現代的なブラウザもこの方法をサポートしていますが、この方法は効率と安全性が低いので、一般的にはIE <= 9の時にのみ使用されます.

var frame = document.createElement("iframe");

if ( frame ) {
  document.body.appendChild(frame);
  frame.setAttribute("style", "display:none");
  frame.contentDocument.open("txt/html", "replace");
  frame.contentDocument.write(data); // data   string   
  frame.contentDocument.close();
  frame.focus();

  frame.contentDocument.execCommand("SaveAs", true, filename);
  document.body.removeChild(frame);
}

長所と短所
長所

サーバリソースと帯域幅を減らす

先端だけが必要で、先端の制御性が増加しました.
欠点

大データ量に対するサポート度が良くないです.

互換性の問題があります.