无法加载PDF文档 - 角JS - BLOB [英] Failed to load PDF document - Angular JS - BLOB

问题描述

我想从网页API的PDF文件，并​​希望在角应用展示。获得无法加载PDF文档的错误。
我按照
<一个href=\"http://stackoverflow.com/questions/21628378/angularjs-display-blob-pdf-in-an-angular-app\">AngularJS:在角应用后显示的BLOB（.PDF）。
然而，我可以按照成功下载同一个文件<一个href=\"http://stackoverflow.com/questions/24080018/download-file-from-a-asp-net-web-api-method-using-angularjs\">Download使用angularjs 后从的ASP.NET Web API方法文件。

看起来像我得到的文件为分块传输恩codeD。不知怎的，试图角度应用程式中显示时，这是没有得到德codeD。请指教。

网页API code：

 的Htt presponseMessage结果= NULL;
        VAR localFilePath = @C：\\的test.pdf        如果（！File.Exists（localFilePath））
        {
            结果= Request.CreateResponse（的HTTPStatus code.Gone）;
        }
        其他
        {//文件服务到客户端
            结果= Request.CreateResponse（的HTTPStatus code.OK）;
            result.Content =新StreamContent（新的FileStream（localFilePath，FileMode.Open，FileAccess.Read））;
            result.Content.Headers.ContentDisposition =新System.Net.Http.Headers.ContentDispositionHeaderValue（附件）;
            result.Content.Headers.ContentType =新MediaTypeHeaderValue（应用程序/ PDF格式）;
            result.Content.Headers.ContentDisposition.FileName =的test.pdf;
            result.Content.Headers.Add（X-文件名，检验.pdf）;
        }        返回结果;
 

角控制器：

  myModule.controller（pdfviewerController功能（$范围，$ HTTP，$登录，$ SCE）{
$ http.post（'/ API /采样/ GetTestFile'，{responseTyp的：arraybuffer'}）
 .success（功能（响应）{
  var文件=新的Blob（[回应] {类型：应用程序/ PDF'}）;
  变种fileURL = URL.createObjectURL（文件）;
  $ scope.content = $ sce.trustAsResourceUrl（fileURL）;
 }）;
}）;
 

HTML模板：

 ＆LT;嵌入NG-SRC ={{内容}}的风格=宽度：200像素，高度：200像素;＆GT;＆LT; /嵌入＆GT;
 

解决方案

问题是那里的控制器。
{responseTyp的：arraybuffer'} 是verymuch必需的。
对于 $ http.get - 它应该是第二个参数。
对于 $ http.post - 这应该是第三个参数

在上述情况下，我使用$ http.post，我已经通过了 {responseTyp的：arraybuffer'} 作为第二个参数

$ http.post（'/ API /采样/ GetTestFile'，{responseTyp的：arraybuffer'}）

修正code

$ http.post（'/ API /采样/ GetTestFile'，''，{responseTyp的：arraybuffer'}）

I am trying to get PDF document from Web API, and want to show in Angular App. Getting "Failed to load PDF document error". I have followed "AngularJS: Display blob (.pdf) in an angular app" post. Whereas, i can download the same file successfully by following "Download file from a ASP.NET Web API method using angularjs" post.

Looks like i am getting the file as "Chunked Transfer Encoded". Somehow this is not getting decoded when trying to show in angular app. Please advise.

Web API Code:

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 Controller:

   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 Template:

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

解决方案

problem is there in controller. {responseType:'arraybuffer'} is verymuch required. For $http.get - It should be second parameter. For $http.post - It should be third parameter.

In above case, i am using $http.post and i have passed {responseType:'arraybuffer'} as second parameter.

$http.post('/api/Sample/GetTestFile', {responseType:'arraybuffer'})

Corrected code

$http.post('/api/Sample/GetTestFile','', {responseType:'arraybuffer'})

这篇关于无法加载PDF文档 - 角JS - BLOB的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！