AngularJS：在一个有角度的应用程序中显示blob(.pdf)

发布时间：2020-12-17 09:09:23 所属栏目：安全来源：网络整理

导读：我一直在试图显示pdf文件，我得到一个blob从$ http.post响应。必须在应用程序中使用 embed src例如。我遇到了几个堆栈帖子，但一些我的例子不似乎工作。 JS：根据this doc，我继续尝试… $http.post('/postUrlHere',{myParams}).success(function (respons

我一直在试图显示pdf文件，我得到一个blob从$ http.post响应。必须在应用程序中使用< embed src>例如。

我遇到了几个堆栈帖子，但一些我的例子不似乎工作。

JS：

根据this doc，我继续尝试…

$http.post('/postUrlHere',{myParams}).success(function (response) {
 var file = new Blob([response],{type: 'application/pdf'});
 var fileURL = URL.createObjectURL(file);
 $scope.content = fileURL;
});

现在从我的理解，fileURL创建一个临时的网站，博客可以用作refference。

HTML：

<embed src="{{content}}" width="200" height="200"></embed>

我不知道如何在角度中处理这个，理想的情况将是(1)将其分配给范围，(2)’准备/重建’blob到pdf(3) embed>因为我想在应用程序中显示它。

我一直在研究超过一天，现在，但一些我怎么不能看起来理解这是如何工作在角度..让我们只是假设PDF查看器库中没有一个选项。

首先，你需要将responseType设置为arraybuffer。如果您想要创建一个数据块，这是必需的。看到 Sending_and_Receiving_Binary_Data.所以你的代码将如下所示：

$http.post('/postUrlHere',{myParams},{responseType:'arraybuffer'})
  .success(function (response) {
       var file = new Blob([response],{type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
});

下一部分是，你需要使用$sce服务来使角信任你的url。这可以这样做：

$scope.content = $sce.trustAsResourceUrl(fileURL);

不要忘记注入$sce服务。

如果这一切都完成，你现在可以嵌入你的pdf：

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!