正确地创建并通过HTML5文件和URL的API即成PDF斑点(Properly Create and

好吧，让我们说我有地方存储的文档数据，让我们随意服食此PDF 。

问题＃1。 我想要做的就是让一个AJAX调用此URL（因为我需要通过一些认证报头，它是跨域）。 再取回来的数据，创建一个BLOB网址吧，追加一个iFrame的DOM，并指导src的BLOB网址。

目前我的代码如下所示：

$.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”中的iFrame。

问题2。 我想这导致文件下载提示。 不知道如何保证这一点考虑到PDF的自然只是在iFrame中显示。

Answer 1:

jQuery.ajax目前不支持的斑点，看到这个错误报告＃7248被封闭，wontfix。

然而，它很容易做到的斑点XHR没有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();

从恬不知耻地复制HTML5ROCKS 。

如果jQuery的做支持BLOB类型 ，它可能是简单的：

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

Answer 2:

我已经使用@Ciantic答案来适应我的答案。 我避免使用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();

文章来源: Properly Create and Serve PDF Blob via HTML5 File and URL APIs