web-dev-qa-db-ja.com

HTML5ファイルおよびURL APIを介したBlobの適切な作成と提供PDF

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);
});

残念ながら、iFrameで「PDFのレンダリングに失敗しました」というメッセージが表示されます。

問題＃2。これにより、ファイルのダウンロードプロンプトが表示されます。 PDFが自然にiFrameに表示されることを考えると、これをどのように保証するのかわかりません。

javascripthtml5fileblobs
21
Eric H.

jQuery.ajaxは現在、BLOBをサポートしていません。これを参照してください バグレポート＃7248 これは、wntfixとして閉じられています。

ただし、jQueryを使用せずにBLOBに対して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'
})...
38
Ciantic
var src_url = your url here;
var contentDisposition = 'AlwaysInline';
var src_new = src_url.replace(/(ContentDisposition=).*?(&)/, '$1' + contentDisposition + '$2');

これにより、PDFをダウンロードする代わりに表示できます。

ヘッダーのContentDispositionは 'AlwaysInline'である必要があり、ファイルをダウンロードする代わりに表示するだけです。

0
sanj singh

@Ciantic answerを使用して、回答を調整しました。 iframe objの使用を避け、ユーザーはページから直接ファイルをダウンロードできます。

var link = 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf';
$("body").addClass("loading"); // adding the loading spinner class

var xhr = new XMLHttpRequest();
xhr.open('GET',link,true);
xhr.responseType = 'blob';

        xhr.onload = function(e){
                 if (this.status == 200) {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(new Blob([this.response], {type: 'application/pdf'}));
                    a.href = url;
                    a.download = 'report.pdf';
                    a.click();
                    window.URL.revokeObjectURL(url);
                    $('body').removeClass("loading"); //removing the loading spinner class
                  }else{
                      $('body').removeClass("loading") //removing the loading spinner class
                      console.log(this.status);
                      alert('Download failed...!  Please Try again!!!');
                  }
            };
            xhr.send();
0
LordDraagon