4 thoughts on “Display PDF from Byte Array

  1. @jjacobs33589
    Yeah, it’s possible. The ‘source’ input can handle with string | Uint8Array | PDFDocumentProxy.

    In my application i am using an Uint8Array.

      public downloadUint8Array(fileUrl: string): Observable<Uint8Array> {
        return this._http
          .get(fileUrl, { responseType: ResponseContentType.ArrayBuffer })
          .map((response: Response) => response.arrayBuffer())
          .map((arrayBuffer: ArrayBuffer) => new Uint8Array(arrayBuffer))
          .first();
      }
  2. Here’s and example how to load pdf with HttpClient:

    import { Component } from '@angular/core';
    import { HttpClient, HttpResponse } from '@angular/common/http';
    
    @Component({
      selector: 'app-root',
      template: `<pdf-viewer [src]="pdfSrc" [show-all]="true"></pdf-viewer>`
    })
    export class AppComponent {
      pdfSrc: any;
    
      constructor(private http: HttpClient) {
        this.http.get('https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf', { responseType: 'arraybuffer' })
        .subscribe((file: ArrayBuffer) => {
          this.pdfSrc = new Uint8Array(file);
          // or directly passing ArrayBuffer
          // this.pdfSrc = file;
        });
      }
    }

    Let me know if it works for you

  3. My Web API returns PDF file as byte[]. To get it working, I have to do a conversion to Uint8Array. Hopefully this helps.

         this._http.get(URL)
            .map((file:any) => file.json())
            .subscribe(
                (data:any) => {
                        this.src=this.convertDataURIToBinary(data);
                }
            );
    
    convertDataURIToBinary(dataURI: string) {
        var raw = window.atob(dataURI);
        var rawLength = raw.length;
        var array = new Uint8Array(new ArrayBuffer(rawLength));
    
        for(var i = 0; i < rawLength; i++) {
        array[i] = raw.charCodeAt(i);
        }
        return array;
    }