How to display a PDF in Angular 6 using a byte array retrieved from a WebAPI

Question

How to display a PDF in Angular 6 using a byte array retrieved from a WebAPI

Having trouble opening a PDF from byte array sent by WebAPI.

This is my Service:

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

And here's what I have in my component:

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

However, when I run it, the PDF document fails to load. I've enabled pop-ups but still no luck...

Link to Image

angular typescript google-chrome pdf httpclient

Answer 1

Answer №1

Check out the following code snippet:

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', observe: 'response' }
                });
        }

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

Answer 2

Check out the following code snippet:

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', observe: 'response' }
                });
        }

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

How to display a PDF in Angular 6 using a byte array retrieved from a WebAPI

Answer №1

Server side

Similar questions

Testing the React context value with React testing library- accessing the context value before the render() function is executed

The Material Angular components fail to load

Encounter the "Error: Source 'cloudsTileLayer-RasterSource' not found" message while trying to integrate a weather tile layer into Azure Maps

Is there a way to transform time into a percentage with the help of the moment

Testing a callback function within a method in Angular

Identifying Gmail line breaks in the clipboard using Angular

Navigating the complexities of applying CSS exclusively to child grids within Kendo Angular may seem challenging at first

Execute tap() function without subscribing

Display the content of an md-dialog with a scroll bar

Developing an Angular 11 Web API Controller with a POST Method

Choosing the default drop-down option in Angular based on a falsy value

Creating a universal wrapper function to serve as a logging tool?

Navigating through a React application with several workspaces - the ultimate guide

Having trouble with VueJS ref not preventing the default form action on submit?

Is it possible to include a component in an HTML file when the constructor of the component needs a parameter?

Add one string to an existing array

Ways to delete a class in typescript

What could be causing my Angular2 component to not properly use my template?

Enhancing keyboard accessibility with the spacebar for radio buttons and check boxes in Angular 2

Is it possible to ensure that all values from a specific type are represented in an enum collection?