IFrame加载pdf空白

vi4fp9gy 于 2022-10-24 发布在 Angular

关注(0)|答案(1)|浏览(1158)

在花了大量时间搜索之后，我终于决定在这里提出另一个类似的问题。

目标我想将PDF显示为IFRAME。
问题iframe正在加载pdf并渲染页面，但内容完全为空。
**我在做什么-**我从后端收到一个二进制pdf文件的响应，我正在创建Blob，然后创建该Blob的objectUrl，并将URL设置为iframe的src。

我的代码工作正常，并在IFRAME中显示了一个示例PDF。但不适用于其他PDF。

我的代码-

$.ajax(settings).done(function(response){
   console.log("my response ==>", response)
   const blob = new Blob([response], {type:'application/pdf'})
   const url = window.URL.createObjectURL(blob) // creating the url with help of URL API
   let PdfURL = document.getElementById('iframePdfURL') 
   PdfURL.src=url // here setting the src of iframe of id =>(iframePdfURL)
   URL.revokeObjectURL(url);
}).fail(function(error){
   console.log(error);
})

**Case I当我收到PDF版本-%PDF-1.3的响应时，以下代码运行正常

**案例II当我收到PDF版本-%PDF-1.4的响应时，上面的代码不起作用，并显示空白的PDF

我不确定**%PDF-1.4**是否真的是一个版本或其他什么，但我注意到pdf在响应中有这个不起作用。我在这里做错了什么？

angularjs

来源：https://stackoverflow.com/questions/74023803/iframe-loading-pdf-blank

1条答案

按热度按时间

nzrxty8p1#

如果有人面临这个问题，以下是我如何解决它的。
在上面的代码中，我手动创建了一个pdf二进制Blob，我不确定是什么导致了这个问题，对于一个pdf它正在工作，对于另一个pdf，它不工作，但现在我更改了我的代码，而不是手动创建BLOB，我使用$http(我使用AngularJS)通过使用responseType: "blob"来获取BLOB。
代码-

$http({
      url: settings.url,
      method: "GET",
      responseType: "blob",
      headers:{
       "Authorization": "Bearer <?php echo $jwt; ?>"
      }
     }).then(function(response) {
      var fileURL = URL.createObjectURL(response.data);
      $('#iframePdfURL').attr('src',fileURL);
   });

因为我使用的是AngularJS，所以我使用了$http，但我发现我们也可以做同样的事情，并使用fetch API请求BLOB作为响应类型。
我希望这能有所帮助。

赞(0）回复(0）举报 2022-10-24

我来回答

IFrame加载pdf空白

1条答案

相关问题

热门标签

最新问答