純粋なフロントエンドのダウンロードPDFのリンクファイルの代わりに、ソリューションのプレビューを開きます

純粋なフロントエンドのダウンロードPDFのリンクファイルの代わりに、ソリューションのプレビューを開きます

I.はじめと需要

 1.1はじめに

      バックグラウンドでサーバーとデータを交換するためのXMLHttpRequest。これは、ページの特定の部分のために、ページ全体をリロードせずに更新される、ということを意味します。

      質問：Chromeが自動的に内蔵のPDFリーダーが開き呼び出します

 1.2デマンド

      しかし、フィールドが代わりにダウンロードするので、異なっているが、直接ページのプレビューファイルを開いた場合、グーグル（クローム）のブラウザでは、タグを使用すると、PDFファイルをダウンロードするためのリンクをダウンロードし、それは同じドメインであれば、あなたがダウンロードすることができます属性。そしてストリームが楽屋返されたファイルをダウンロードし、しかし需要が代わりにプレビューを開く、ファイルをダウンロードする]をクリックし、直接です。

第二に、ファイルをダウンロード

2.1、アイデア

    propertyタグを通じてダウンロードし、我々は直接データ・ストリーム・ファイルをダウンロードするようにインタフェースすることができ戻っあるため、我々は、フローラベルのダウンロードダウンロードを使用するように、ファイルのリンクにファイルを変換するためのHTTPリクエストを送信シミュレートすることができます。アイデアと方法以下は、ファイルストリームのファイル転送をダウンロードするためのリンクを記述します

2.2、ファイル転送ストリーム・ファイル・パス

図1は、第一リンクが経路であるかどうかを確認します

合法性のURLを確認するために正規表現を使用します

1（（A：|：REG = / ^（\ / \ / [HH] [tTを] {2}にpP] [SS] \ / \ / [HH] [tTを] {2} [PPは]）させ。-za-z0-9-〜] +））+（[A-ZA-z0-9-〜\ /]）+ $ / ;
 2   IF（！reg.test（URL））{
 3。     スロー 新新（エラーを「渡されたパラメータは、標準的なリンク、正当ではないではありません」）;
 4   }

2、XMLHttpRequestオブジェクトを作成します

ファイルストリームを取得するために、アナログ伝送httpリクエスト

。1   LET XHR = 新新のXMLHttpRequest（）; //は、XMLHttpRequestオブジェクトを作成
2   xhr.open（ 'HTTP：// URL'、 'GET'、trueに）; // 型が要求された指定、URL、および非同期処理を要求するかどうか。3つのパラメータはメソッドです：要求のタイプ、GETやPOSTのURL：サーバーの非同期上のファイルの場所：真（非同期）またはfalse（同期）
3。   xhr.setRequestHeader（「Content-Typeの」、 `ファイルアプリケーション/ pdf`） ; //セット要求ヘッダー
 4。   xhr.responseType = "ブロブ"; // ここでブロブを必要とリターンのデータ型
。5   xhr.onload = 関数（）{ // 要求が成功したコールバックであった
6。       IF（この .status == 200です） {
 7          //はバイナリストリームを受信する
。8          VAR= BLOB この.response;
 9        }
 10      }
 11。   xhr.send（）; // サーバに要求を送信

3、完全な方法

1  / * *
 2  *ターンファイルストリームファイルのリンクをダウンロードする-直接開いているPDFのラベルダウンロードするには、問題のGoogleのブラウザを解決することを目的としたPDFファイル
 3  * @paramのURL：ファイルのリンク
 4  * @paramファイル名：ファイル名;
 5  * @paramをタイプ：ファイルタイプ;
 6。  * / 
7。 機能fileLinkToStreamDownload（URL、ファイル名、タイプ）{
 8。   せ REG = / ^（[HH] [tTを] {2}にpP]：\ / \ / | [HH] [tTを】 {2} [PPは] [SS ]：\ / \ /）（（[A-ZA-z0-9-〜] +））+（[A-ZA-z0-9-〜\ /]）+ $。 / ;
 9    IF（！{reg.test（URL））
 10      スロー 新しい新しいエラー（ "渡された無効なパラメータは、標準的なファイルのリンクではありません" ）;
 11    } 他{
 12がある     のlet XHR =新しいXMLHttpRequestを（）;
13      xhr.open（ 'get'が、URL、真の）;
14      xhr.setRequestHeader（ 'のContent-Type'、 'アプリケーション/ $ {タイプ} `）。
15      = "ブロブ" xhr.responseType 。
16      xhr.onload = 関数（）{
 17        であれば（この .statusの== 200 ）{
 18          // 接受二进制文件流
19          のvarブロブ= この.response。
20          downloadExportFile（BLOBファイル名、タイプ）
 21        }
 22      }
 23      xhr.send（）。
24   }
 25 }

 2.3、ファイルをダウンロード

1、ダウンロードリンクを作成

1 LET downloadElement =のdocument.createElement（ 'A' ）;
 2 HREFせ= BLOB;
 3    IF（typeof演算 BLOB == '文字列' ）{
 4。      downloadElement.target = 'は_blank'; // リンクが新しいタブを開き、ある場合ダウンロード
5。    } 他{
 6。      HREFが= window.URL.createObjectURL（BLOB）; //は、ダウンロードリンクを作成する
。7    }
 。8   HREF = downloadElement.href; // ダウンロードリンク

2、シミュレーションは、ダウンロードリンクをクリックしてください

。1 downloadElement.download tagFileName + =モーメント（新新フォーマット（ 'YYYYMMDDhhmmssという'）+ +のfileType日（）getTime（）。）。 ''; // ファイルの名前は、ダウンロードした
2  document.body.appendChild（downloadElementを）;
 。3 downloadElement .click（）; // ダウンロード

3、ダウンロードが完了リリース資源であります

1    document.body.removeChild（downloadElement）; // 完全な除去要素ダウンロード
2を   IF（typeof演算 BLOB = '文字列'！）{
 3。      window.URL.revokeObjectURL（HREF）; // ブロブ和らげる
4    }

4、完全な方法

1  / * *
 2  *エクスポートファイルをダウンロードする
 3。 * @paramブロブ：BLOBを返したり、データをリンクする
 4。 * @paramのtagFileName：ダウンロードファイル名のタグの後に
 。5  * @paramファイルタイプ：ファイルタイプワード（DOCX）エクセル（XLSX） PPT 等
 6。  * / 
7。 機能downloadExportFile（BLOB、tagFileName、たfileType）{
 8。   LET downloadElement =のdocument.createElement（ 'A' ）;
 9    HREF =せBLOBを、
 10    IF（typeof演算 BLOB == '文字列' ）{
 11。      downloadElement.target = '_blank' ;
 12である    } 他{
 13であります     = window.URL.createObjectURL HREF（BLOB）; // ダウンロードリンクを作成して
14    }
 15    downloadElement.href = HREF;
 16    downloadElement.download tagFileName + =モーメント（新しい新しい ..日（）getTime（））フォーマット（ '場合YYYYMMDDhhmmss' ''）+ +のfileType; // ファイル名のダウンロード後
17    ）document.body.appendChild（downloadElementを、
 18    downloadElement.click（）; // ダウンロード
19    document.body.removeChild（downloadElementを）; // 完全なシフトをダウンロード要素に加えて
20    IF（typeof演算！BLOB = '文字列' ）{
 21は      window.URL.revokeObjectURL（HREF）。// ブロブを和らげる
22    }
 23である 
24 }

 2.4、BASE64オブジェクト・ファイルオブジェクト

主に映像のために、他の文書があってもよいです

1  / * *
 2  * Base64でオブジェクトファイルオブジェクト
 。3  * @param URLData：Base64でオブジェクトデータ
 。4  * @paramタイプ：タイプイメージ/ PNG;
 5。 * @Returns} {ブロブ：BLOBファイルオブジェクト
 。6   * / 
7  関数base64ToBlob（ URLData、タイプ）{
 8。    せurlData.split ARR =（ '' ）;
 9    LETのARR =配列[0] .match（/:(.*?);/ ）
 10    MIMEは=（配列はArray.lengthとすること&&せ> ？アレイ1 [1]：タイプ）|| タイプ;
 11    // 削除URLヘッド、およびバイトに変換
12は、    LETバイト= window.atob（ARRの[1。）]
 13である   // ASCIIコード0未満の例外を処理します変換は、0以上である
14   ABとはせ= 新しい新しいArrayBuffer（bytes.lengthする）;
 15    // （ダイレクト・メモリ用の）ビューを生成：8ビットの符号なし整数、長さバイト
16を    せIA = 新しい新しいUint8Array（AB＆）;
 17。   ための（I = 0 LET ; I <bytes.length; Iは++ ）{
 18れる      IA [I] = bytes.charCodeAt（I）;
 19    }
 20が   戻り 、新しい新しいブロブ（[AB＆]を、{
 21は     タイプ：MIME
 22である   }）;
 23れます }

 2.5例

1.ファイルストリームファイル転送リンクをダウンロード

。1 fileLinkToStreamDownload（ 'http://127.0.0.1/download.pdf'、 'ファイルのダウンロードの例'、 'PDF'）

ダウンロードする2、base64でオブジェクト・ファイルオブジェクト

。1のlet BLOB = base64ToBlob（ 'データ：画像/ PNG、Base64で、iVBORw0KGgo = ...'、 '画像/ PNG'）// 取得した画像ファイルストリーム
2 downloadExportFile（BLOB、 'ダウンロード'、 'PNG'）

  録音の問題：ブラウザのキャッシュの問題

  ブラウザのキャッシュメカニズム、我々はXMLHttpRequestのリクエストを使用した場合、ブラウザがキャッシュアドレスのアドレスを要求しますが比較されているので、それをサーバに同じレコード要求に基づいて、直接ではなく、バック、最後の時間に同じリクエスト存在している場合コンテンツ。

  アプローチを解決するようなキャッシュの問題：

図1に示すように、タイムスタンプ方法は、 -ブラウザは別のURLのように、あるたびに異なる即ちなるように、すなわち、各リクエストのURL文字列に加えて、現在の時刻、又は他の同様のランダムな文字列の後ろには、省略するリクエストを処理しますが、キャッシュから読み取ることはありません。

1  　IF（ "？" Url.indexOf（）> = 0）{ //は、パラメータがURLであったか否かを判断する
2          URL = URL + "T＆=" +（新しい新しい日付（））のvalueOf（）;.
 。3    } さもなければ{
 4         URLをURL + + =（ "T =" 新しい新しい日付（））のvalueOf（）;.
 。5        }

2、要求のXMLHttpRequestプラスを送信する前に：

追加変更した場合は、-ので、ヘッダ

1 xhr.setRequestHeader（ "0"、 "変更した場合-以来" ）。 　
2 xhr.send（NULL）。