如何在AngularJS应用程序中显示blob (.pdf
我一直在尝试显示pdf文件，我从$http.post响应中得到了一个blob。例如，必须使用<embed src>在应用程序中显示pdf。
我遇到了几个堆栈帖子，但不知何故，我的例子似乎不起作用。
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创建了一个临时网址，博客可以使用它作为参考。
HTML：
<embed src="{{content}}" width="200" height="200"></embed>我不确定如何处理这个在角度，理想的情况将是(1)分配它到一个作用域，(2)‘准备/重建’的blob到一个pdf (3)传递它到超文本标记语言使用<embed>，因为我想显示在应用程序中。
我已经研究了一天多了，但不知何故，我似乎不能理解这是如何在Angular中工作的……让我们假设pdf查看器库是没有选择的。
回答 8
Stack Overflow用户
发布于 2014-02-12 23:22:54
首先，您需要将responseType设置为arraybuffer。如果您想要创建数据的blob，则这是必需的。参见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服务来让angular信任您的url。这可以通过以下方式完成：
$scope.content = $sce.trustAsResourceUrl(fileURL);不要忘记注入$sce服务。
如果这些都完成了，你现在可以嵌入你的pdf了：
<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>Stack Overflow用户
发布于 2015-05-23 03:54:15
我使用AngularJS v1.3.4
HTML：
<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>JS控制器：
'use strict';
angular.module('xxxxxxxxApp')
.controller('xxxxController', function ($scope, xxxxServicePDF) {
$scope.downloadPdf = function () {
var fileName = "test.pdf";
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
xxxxServicePDF.downloadPdf().then(function (result) {
var file = new Blob([result.data], {type: 'application/pdf'});
var fileURL = window.URL.createObjectURL(file);
a.href = fileURL;
a.download = fileName;
a.click();
});
};
});JS服务：
angular.module('xxxxxxxxApp')
.factory('xxxxServicePDF', function ($http) {
return {
downloadPdf: function () {
return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {
return response;
});
}
};
});Spring Java REST Web服务- MVC:
@RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf")
public ResponseEntity<byte[]> getPDF() {
FileInputStream fileStream;
try {
fileStream = new FileInputStream(new File("C:\\xxxxx\\xxxxxx\\test.pdf"));
byte[] contents = IOUtils.toByteArray(fileStream);
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.parseMediaType("application/pdf"));
String filename = "test.pdf";
headers.setContentDispositionFormData(filename, filename);
ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
return response;
} catch (FileNotFoundException e) {
System.err.println(e);
} catch (IOException e) {
System.err.println(e);
}
return null;
}Stack Overflow用户
发布于 2015-06-11 22:03:37
迈克尔的建议对我很有吸引力:)如果您用$http.get替换$http.post，请记住.get方法接受2个参数而不是3个参数……这就是我浪费时间的地方。;)
控制器：
$http.get('/getdoc/' + $stateParams.id,
{responseType:'arraybuffer'})
.success(function (response) {
var file = new Blob([(response)], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
$scope.content = $sce.trustAsResourceUrl(fileURL);
});查看：
<object ng-show="content" data="{{content}}" type="application/pdf" style="width: 100%; height: 400px;"></object>https://stackoverflow.com/questions/21628378
复制相似问题