PDF Display Angular 2

Question

I am having issue with Angular 2 Displaying a PDF In Iframe or any control.

Can you guide me ?

My Web API Code:

 [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;
    }

I am returning as Byte which I am receiving it.

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);
}  

I tried all option nothing is working.

I Just want to view it in an iframe or any control.

when i try to load blob i get this Image

Answer 1

I found this link a while ago, hope it helps. http://www.devsplanet.com/question/35368633' basically: In fact, this feature isn't implemented yet in the HTTP support.

As a workaround, you need to extend the BrowserXhr class of Angular2 as described below to set the responseType to blob on the underlying xhr object:

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);
  }
}

Then you need to wrap the response payload into a Blog object and use the FileSaver library to open the download dialog:

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);
      });
}

The FileSaver library must be included into your HTML file:

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

See this plunkr: http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview

Unfortunately this will set the responseType for all AJAX requests. To be able to set the value of this property, there are more updates to do in the XHRConnection and Http classes.

As references see these links:

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

Receive zip file, angularJs