27

好的,假设我在某处存储了文档数据,我们随意取这个 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 中。

4

3 回答 3

42

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) {
    // 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'
})...
于 2013-05-23T10:42:00.770 回答
1

我已经使用@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();
于 2019-02-07T08:46:51.267 回答
1
var src_url = your url here;
var contentDisposition = 'AlwaysInline';
var src_new = src_url.replace(/(ContentDisposition=).*?(&)/, '$1' + contentDisposition + '$2');

通过这样做,您将能够查看 pdf 而不是下载它,

Header ContentDisposition 应该是“AlwaysInline”,然后它只会显示您的文件而不是下载它。

于 2019-05-16T11:03:09.117 回答