如何在AngularJS应用中显示Blob（.pdf）

Question

我一直在尝试显示我从$http.post响应中获取的pdf文件。pdf必须使用<embed src>例如在应用程序内显示。

我遇到了几个堆栈帖子，但是以某种方式我的示例似乎不起作用。

JS：

根据这份文件，我继续尝试…

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

现在，据我所知，将fileURL创建一个临时URL，该博客可以用作参考。

HTML：

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

我不确定如何在Angular中处理此问题，理想情况是 （1） 将其分配给作用域， （2） 将blob“准备/重建”到pdf （3）
使用，<embed>因为我将其传递给HTML 想要在应用程序中显示它。

我已经研究了一天多了，但是某种程度上我似乎无法理解它在Angular中是如何工作的。而让我们假设那里没有pdf查看器库。

Answer 1

首先，您需要将设置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>