无法加载 PDF 文档 - Angular JS - BLOB
Failed to load PDF document - Angular JS - BLOB
我正在尝试从 Web API 获取 PDF 文档,并希望在 Angular App 中显示。得到 "Failed to load PDF document error"。
我已关注
“AngularJS: Display blob (.pdf) in an angular app”post。
然而,我可以按照“Download file from an ASP.NET Web API method using AngularJS” post.
成功下载相同的文件
看起来我得到的文件是 "Chunked Transfer Encoded"。当试图在 angular 应用程序中显示时,这不会以某种方式被解码。请指教
网页API代码:
HttpResponseMessage result = null;
var localFilePath = @"C:\Test.pdf";
if (!File.Exists(localFilePath))
{
result = Request.CreateResponse(HttpStatusCode.Gone);
}
else
{// serve the file to the client
result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
result.Content.Headers.ContentDisposition.FileName = "Test.pdf";
result.Content.Headers.Add("x-filename", "Test.pdf");
}
return result;
Angular 控制器:
myModule.controller("pdfviewerController", function ($scope, $http, $log, $sce) {
$http.post('/api/Sample/GetTestFile', {responseType:'arraybuffer'})
.success(function (response) {
var file = new Blob([response], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
$scope.content = $sce.trustAsResourceUrl(fileURL);
});
});
HTML 模板:
<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>
控制器有问题。
{responseType:'arraybuffer'}
非常需要。
对于 $http.get
- 它应该是第二个参数。
对于 $http.post
- 它应该是第三个参数。
在上述情况下,我使用的是 $http.post 并且我已将 {responseType:'arraybuffer'}
作为第二个参数传递。
$http.post('/api/Sample/GetTestFile', {responseType:'arraybuffer'})
更正代码
$http.post('/api/Sample/GetTestFile','', {responseType:'arraybuffer'})
我正在尝试从 Web API 获取 PDF 文档,并希望在 Angular App 中显示。得到 "Failed to load PDF document error"。 我已关注 “AngularJS: Display blob (.pdf) in an angular app”post。 然而,我可以按照“Download file from an ASP.NET Web API method using AngularJS” post.
成功下载相同的文件看起来我得到的文件是 "Chunked Transfer Encoded"。当试图在 angular 应用程序中显示时,这不会以某种方式被解码。请指教
网页API代码:
HttpResponseMessage result = null;
var localFilePath = @"C:\Test.pdf";
if (!File.Exists(localFilePath))
{
result = Request.CreateResponse(HttpStatusCode.Gone);
}
else
{// serve the file to the client
result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
result.Content.Headers.ContentDisposition.FileName = "Test.pdf";
result.Content.Headers.Add("x-filename", "Test.pdf");
}
return result;
Angular 控制器:
myModule.controller("pdfviewerController", function ($scope, $http, $log, $sce) {
$http.post('/api/Sample/GetTestFile', {responseType:'arraybuffer'})
.success(function (response) {
var file = new Blob([response], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
$scope.content = $sce.trustAsResourceUrl(fileURL);
});
});
HTML 模板:
<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>
控制器有问题。
{responseType:'arraybuffer'}
非常需要。
对于 $http.get
- 它应该是第二个参数。
对于 $http.post
- 它应该是第三个参数。
在上述情况下,我使用的是 $http.post 并且我已将 {responseType:'arraybuffer'}
作为第二个参数传递。
$http.post('/api/Sample/GetTestFile', {responseType:'arraybuffer'})
更正代码
$http.post('/api/Sample/GetTestFile','', {responseType:'arraybuffer'})