PDF显示Angular 2

Question

我在Angular 2中遇到问题在Iframe或任何控件中显示PDF。

你能指导我吗？

我的Web API代码：

[Route("GetReportStream")] 
    [HttpPost] 
    public HttpResponseMessage GetReportStream(string strReportUrl) 
    { 
     strReportUrl = "http://sample.com/ReportServer?%2fN+Team+3%2fD+Online+Reports%2fMemo+to+the+Court&rs:Command=Render&rc:Parameters=False&DocumentID=8&rs:Format=PDF"; 

     byte[] pdf; 
     byte[] buffer = new byte[4096]; 
     try 
     { 
      WebRequest request = WebRequest.Create(strReportUrl); 
      request.UseDefaultCredentials = true; 
      using (WebResponse resp = request.GetResponse()) 
      { 
       using (Stream responseStream = resp.GetResponseStream()) 
       { 
        using (MemoryStream memoryStream = new MemoryStream()) 
        { 
         int count = 0; 
         do 
         { 
          count = responseStream.Read(buffer, 0, buffer.Length); 
          memoryStream.Write(buffer, 0, count); 
         } while (count != 0); 
         pdf = memoryStream.GetBuffer(); 
        } 
       } 
      } 
     } 
     catch (Exception ex) 
     { 
      pdf = null; 
     } 
     var response = Request.CreateResponse<byte[]>(HttpStatusCode.OK, pdf);    
     return response; 
    } 

我回国作为我接受它字节。

private getReportStreamOnSuccess(response): void { 
    debugger;   
    var byteArray = new Uint8Array(response); 
    var blob = new Blob([byteArray], { type: 'application/pdf' }); 
    //var file = new Blob([response], { type: 'application/pdf' }); 
    var fileURL = URL.createObjectURL(blob); 
    this.url = this.domSanitizer.bypassSecurityTrustResourceUrl(fileURL); 
} 

我试过所有的选项没有任何工作。

我只想在iframe或任何控件中查看它。

当我尝试加载BLOB我得到这个 Image

Answer 1

我发现这个链接前一阵子，希望它帮助。 http://www.devsplanet.com/question/35368633' 基本上： 实际上，该功能尚未在HTTP支持中实现。

作为一种解决方法，则需要扩展BrowserXhr类Angular2的如下所述设定的responseType成团块底层XHR对象上：

import {Injectable} from 'angular2/core'; 
import {BrowserXhr} from 'angular2/http'; 

@Injectable() 
export class CustomBrowserXhr extends BrowserXhr { 
    constructor() {} 
    build(): any { 
    let xhr = super.build(); 
    xhr.responseType = "blob"; 
    return <any>(xhr); 
    } 
} 

然后，你需要包装响应的负载成博客对象，并使用FileSaver库打开下载对话框：

downloadFile() { 
    this.http.get(
    'https://mapapi.apispark.net/v1/images/Granizo.pdf').subscribe(
     (response) => { 
     var mediaType = 'application/pdf'; 
     var blob = new Blob([response._body], {type: mediaType}); 
     var filename = 'test.pdf'; 
     saveAs(blob, filename); 
     }); 
} 

的FileSaver库必须纳入到你的HTML文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script> 

看到这个plunkr：http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview

不幸的是这将设置的responseType所有AJAX请求。为了能够设置这个属性的值，在XHRConnection和Http类中有更多的更新。

作为参考看到这些链接：

https://stackoverflow.com/questions/34586671/download-pdf-file-using-jquery-ajax

Receive zip file, angularJs