HTML5ファイルとURL APIを使用してBlobを適切に作成して配信する

Question

[OK]をクリックします。ドキュメントデータがどこかに保存されていれば、任意にthis pdfとしましょう。

問題＃1。私がしたいことは、このURLへのAJAX呼び出しを行うことです（いくつかの認証ヘッダーを渡す必要があり、クロスドメインであるためです）。返されたデータを受け取り、blob urlを作成し、iFrameをDOMに追加して、srcをblob URLに転送します。

は現在、私のコードは次のようになります。

$.ajax({ 
    url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf' 
}).done(function(data){ 
    var file = new Blob([data], {type:'application/pdf'}), 
     url = URL.createObjectURL(file), 
     _iFrame = document.createElement('iframe'); 
     _iFrame.setAttribute('src', url); 
     _iFrame.setAttribute('style', 'visibility:hidden;'); 
     $('#someDiv').append(_iFrame); 
}); 

を残念ながら、私は取得していますインラインフレームに「PDFのレンダリングに失敗しました」。

問題＃2。私はこの結果、ファイルダウンロードのプロンプトを表示したいと思います。 PDFが自然にiFrameに表示されるだけなので、これを保証する方法が不明です。

Answer 1

jQuery.ajaxは現在ブロブをサポートしていません。このbug report #7248はwontfixとして閉じています。

は、しかし、それはjQueryのせずに、ブロブのためのXHRを行うのは簡単です：

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', true); 
xhr.responseType = 'blob'; 

xhr.onload = function(e) { 
    if (this.status == 200) { 
    // Note: .response instead of .responseText 
    var blob = new Blob([this.response], {type: 'application/pdf'}), 
     url = URL.createObjectURL(blob), 
     _iFrame = document.createElement('iframe'); 

    _iFrame.setAttribute('src', url); 
    _iFrame.setAttribute('style', 'visibility:hidden;'); 
    $('#someDiv').append(_iFrame)   
    } 
}; 

xhr.send(); 

が臆面もなくHTML5rocksからコピー。

jQueryのBLOB型をサポートしていた場合、それは同じくらい簡単かもしれないとして：

データ列は次のように始まる

$.ajax({ 
    url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', 
    dataType:'blob' 
})...