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

Alter the language settings of the Datepicker feature in Material Angular 4

Navigating using Javascript library in Angular 2 framework

What is the best way to display a Nested JSON structure without an object key?

Visual Studio 2015 is struggling to locate a specific module, yet the command line interface for

Encapsulate the module function and modify its output

Utilizing WebDriver for creating distinct driver profiles for Chrome and Internet Explorer browsers

Can we incorporate 'this' in the super() constructor?

Auto-complete feature not populating the input field in Google Chrome

Utilizing two DTOs for a single controller in NestJS

TypeORM: When generating a migration, a SyntaxError is thrown stating that an import statement cannot be used outside a

What are the steps for incorporating a Zoom & Pan feature into an anyChart SeatMap?

The error message indicates a change in the binding value within the template, resulting in an

ModalComponent dependency not provided

Is it possible to generate a Date object from a predetermined string in typescript?

The module '@/assets/icons/pay/pay-success.png' cannot be located, along with its corresponding type declarations.ts

The issue of the Angular service being consistently undefined arises when it is invoked within an

The one-tap login popup from Google always appears, even when the user is already logged in

Unable to transfer data through Ionic popover

Looking for recommendations on the best tools to use for starting an Angular 2 project?

What is the best way to incorporate cors modules in TypeScript?