PDFでダウンロードするときにChromeがBlobオブジェクトをブロックする

Question

APIを呼び出してPDFを取得し、responseTypeをarraybufferとして送信する小さなスクリプトを作成しました。これを使用する

私は新しいブロブを作成し、私はアンカー要素を作成しダウンロードするには、これを強制的に「アプリケーション/ PDF」

としてのタイプを設定し、それをBLOBを渡すと、それをクリックしてください。

これはローカルでもテストサーバーの他のブラウザでもうまく動作しますが、Chromeでは失敗します。ダウンロードバーにはファイルがありません。

APIにURLを貼り付けて見ることができ、元のAPI呼び出しからの応答がBlobに渡されるため、PDFが確実に利用可能です。

サンプルコードこれを強制

var fileName = 'dummyFilename-' + offerId + '.pdf'; 
var blob = new window.Blob([resData], { type: 'application/pdf' }); 

var anchorElement = document.createElement('a'); 
var url = window.URL.createObjectURL(blob); 

document.body.appendChild(anchorElement); 
anchorElement.id = 'anchorElement'; 
anchorElement.hidden = 'true'; 
anchorElement.href = url; 

if (typeof anchorElement.download !== 'undefined') { 
    anchorElement.download = fileName; 
} else { 
    anchorElement.target = '_blank'; 
} 

anchorElement.click(); 

Answer 1

...常に少しハックです：

あなたがその機能を実行するためにクリックされているHTML要素がリンクである場合、あなたは試してみたいことがありますあなたがしたい場合

<a href="path/to/your/file.pdf" download>Download PDF</a> 

あなたはそれを名前を変更することができます：

download属性を追加します

<a href="path/to/your/file.pdf" download="downloaded-pdf-name.pdf">Download PDF</a> 

あなたはdownload属性は動作しません場合は、あなたのクリックイベントハンドラは次のようなものになるはずです、他のブラウザでその仕事をするためにそのソリューションを使用している場合：downloadチェックが得ることが

document.getElementById('#download-pdf').onclick = function (event) { 
    if (!"download" in document.createElement("a")) { 
     // Download is NOT supported, the browser is probably not Chrome 
     // You don't want the native behaviour, which will probably open 
     // the PDF in another tab, so: 
     event.preventDefault(); 

     // TODO: Adapt your code to execute from here... 
    } 
} 

をFirefoxでは動作しません。ここでの答えのコメントを確認：How to detect support for the HTML5 "download" attribute?

あなたがそのオプションを持っている場合は、私はHTTPレスポンスヘッダにContent-Disposition = 'attachment; filename=downloaded-pdf-name.pdf'を設定することをアドバイスします。別のバックエンドでこれを行う具体的な方法については、hereを参照してください。

Answer 2

これを試しましたか？ （要素を作成せずに）...私はそれが助けてくれることを願っています

var fileName = 'dummyFilename-' + offerId + '.pdf'; 
var blob = new window.Blob([resData], { type: 'application/pdf' }); 
// Parse blob object to base64 to prevent chrome blocking: 
var reader = new FileReader(); 
reader.readAsDataURL(blob); 
reader.onloadend = function() { 
    base64data = reader.result; 
    // For IE: 
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { 
     window.navigator.msSaveOrOpenBlob(base64data); 
    } // For webkit 
    else { 
     var objectUrl = URL.createObjectURL(base64data); 
     window.open(objectUrl); 
    } 
}