通过HTML5文件和URL API正确创建并提供PDF Blob [英] Properly Create and Serve PDF Blob via HTML5 File and URL APIs

问题描述

好吧，假设我将文档数据存储在某处，我们随意采取此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） ; 
}）; 
  

不幸的是，我得到了'Failed to Render PDF'in iFrame。

问题＃2。我想这会导致文件下载提示。不确定如何保证这一点，因为PDF的自然只会显示在iFrame中。

解决方案

jQuery.ajax目前不支持blob ，请参阅此错误报告＃7248 ，并将其作为wontfix关闭。

然而，对于没有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）{
 //注意：.response而不是.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'
}）... 
  

Ok, Let's say I have document data stored somewhere, let's arbitrarily take this pdf.

Issue #1. What I want to do is make an AJAX call to this URL (because I need to pass some authentication headers and it is cross domain). Then take the returned data, create a blob url for it, append an iFrame to the DOM, and direct the src to the blob url.

Currently my code looks like this:

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

Unfortunately, I am getting a 'Failed to Render PDF' in the iFrame.

Issue #2. I'd like this to result in a file download prompt. Not sure how to guarantee this given that PDF's will naturally just display in the iFrame.

解决方案

jQuery.ajax does not currently support blobs, see this bug report #7248 which is closed as wontfix.

However it's easy to do XHR for blobs without jQuery:

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

Shamelessly copied from HTML5rocks.

If jQuery did support the Blob type, it could be as simple as:

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

这篇关于通过HTML5文件和URL API正确创建并提供PDF Blob的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！