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

前端之家收集整理的这篇文章主要介绍了AngularJS:在一个有角度的应用程序中显示blob(.pdf)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在试图显示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>

猜你在找的Angularjs相关文章