AngularJS：显示BLOB（.PDF）在角应用 [英] AngularJS: Display blob (.pdf) in an angular app

问题描述

我一直在试图显示的我越来越为从 $ http.post 响应一个blob PDF文件。 PDF格式必须在应用程序内使用显示＆LT;嵌入SRC方式＆gt; 例如：

I have been trying to display pdf file which I am getting as a blob from a $http.post response. The pdf must be displayed within the app using <embed src> for example.

我碰到几个栈的职位，但我的一些例子似乎没有如何工作的。

I came across couple of stack posts but some how my example doesnt seem to work.

JS：

，我去，并试图...

according to this doc, I went on and tried...

$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使用。

Now from what I understand, fileURL creates a temporary url that the blog can use as refference.

HTML：

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

我不知道如何在角度解决这个问题，理想的情况是为（1）将其分配给一个范围，（2）'prepare /重建团块到PDF的（3）将它传递给使用＆LT的HTML，嵌入＆GT; ，因为我想内显示它应用程序。

I am not sure how to handle this in angular, the ideal situation would be to (1) assign it to a scope, (2) 'prepare/rebuild' the blob to a pdf (3) pass it to the HTML using <embed> cause I want to display it within the app.

我一直在研究了一个多一天，但一些如何我似乎无法理解它是如何运作的角度..和让刚刚承担了PDF阅读器库出有不是一个选项。

I have been researching for more than a day now but some how I cant seem to understand how this works in angular.. and lets just assume the pdf viewer libraries out there weren't an option.

推荐答案

所有你需要设置首先的responseType 到 arraybuffer 。如果你想创建数据的一个blob这是必需的。见<一href=\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt$p$pquest/Sending_and_Receiving_Binary_Data\">Sending_and_Receiving_Binary_Data.所以，你的code将是这样的：

First of all you need to set the responseType to arraybuffer. This is required if you want to create a blob of your data. See Sending_and_Receiving_Binary_Data. So your code will look like this:

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

接下来的部分是，你需要使用 $ SCE 服务，使角信任您的网址。这可以以这种方式来完成：

The next part is, you need to use the $sce service to make angular trust your url. This can be done in this way:

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

不要忘了注入 $ SCE 服务。

如果这是所有做你现在可以嵌入您的PDF：

If this is all done you can now embed your pdf:

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

这篇关于AngularJS：显示BLOB（.PDF）在角应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！