iFrame 加载 pdf 空白

Question

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

目标 我想将 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);
})

案例一 当我收到 PDF 版本的响应时，以下代码工作正常 - %PDF-1.3

案例二 当我收到 PDF 版本 - %PDF-1.4

的响应时，上面的代码不起作用并显示空白 pdf

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

Answer 1

如果有人遇到这个问题，我是这样解决的。

在上面的代码中，我手动创建了一个 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 作为 responseType。

我希望这会有所帮助。

Answer 2

DataURL 有文件大小（长度）限制 铬 - 2mb