Angular 6 open pdf from byte array sent from WebAPI

Question

Hi I have issues opening pdf from byte array sent by WebAPI.

My Service:

getPdfDocument(): Observable<any> {
        return this.httpClient
            .get(this.configuration.serverUrl + this.configuration.getPdfDoc, {
                responseType: "arraybuffer" //tried with 'blob'
            });
}

My component:

this.service.getPdfDocument()
        .subscribe(data => {
            var file = new Blob([data], { type: 'application/pdf' });   
            this.pdfContent = URL.createObjectURL(file);
            window.open(this.pdfContent);
        })

When I run it I get failed to load PDF document... I enabled pop ups still no joy...

Joe Belladonna · Accepted Answer · 2018-10-19 12:00:39Z

4

Try this one:

service:

getPdfDocument(): Observable<any> {
    let headers = new HttpHeaders({ 'Content-Type': 'application/JSON' });
    return this.httpClient
               .get(this.configuration.serverUrl + this.configuration.getPdfDoc,
                    { headers: headers, responseType: 'blob' as 'json', observe: 'response' as 'body' }
                });
        }

request:

this.service.getPdfDocument()
        .subscribe(
                (data) => {
                    this.openFileForPrint(data);
                });

openFileForPrint(data: HttpResponse<any>) {
        let fileUrl = window.URL.createObjectURL(data);
        window.open(fileUrl, '_blank', 'location=yes,height=600,width=800,scrollbars=yes,status=yes');
    }

Server side

[HttpGet]
public HttpResponseMessage getpdf(DateTime datum, int idlokacija)
{
    var r = _printService.getdata(datum, idlokacija);
    if (r == null)
    {
        return new HttpResponseMessage(HttpStatusCode.NotFound);
    }
    return SendPdfFile(r);
}

public static HttpResponseMessage SendPdfFile(string filePath, bool brisanje = true)
{
    var stream = new FileStream(filePath, FileMode.Open);
    HttpResponseMessage response = new FileHttpResponseMessage(filePath, brisanje)
    {
        StatusCode = HttpStatusCode.OK,
        Content = new StreamContent(stream)
    };
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
    return response;
}

edited Oct 19, 2018 at 12:00

answered Oct 19, 2018 at 9:41

Joe Belladonna

1,35914 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

tom33pr Over a year ago

This implementation throws the following: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Joe Belladonna Over a year ago

@tom33pr when you look to your server response how does your response header look like?

tom33pr Over a year ago

Joe see below: Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: Content-Type Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS Access-Control-Allow-Origin: * Cache-Control: no-cache Content-Length: 230962 Content-Type: application/json; charset=utf-8 Date: Fri, 19 Oct 2018 11:05:35 GMT Expires: -1 Pragma: no-cache Server: Microsoft-IIS/10.0 X-AspNet-Version: 4.0.30319 X-Powered-By: ASP.NET X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcZGFlcmEtcHJ6ZXpkemllY2tpdFxTb3VyY2VcUmVwb3NcUmV2aWV3IG9mIERlY2lzaW9uczJcUm9EXFJvRFdTXGFwaVxHZXRUcmltRG9jdW1lbnQ=?=

tom33pr Over a year ago

My WebApi controller returns byte array: [HttpGet] [Route("api/GetDocument")] public byte[] Get()

Joe Belladonna Over a year ago

@tom33pr if you can edit api side of code in my edited answer you will find how my api side looks like.

|

Collectives™ on Stack Overflow

Angular 6 open pdf from byte array sent from WebAPI

1 Answer 1

Server side

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Server side

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related