Solvedng2 pdf viewer Display PDF from Byte Array

I'm hitting a service that generates a pdf based on data sent it and returns the pdf in a byte array. Is there a way to use this plugin to display the pdf?

16 Answers

✔️Accepted Answer

Here's and example how to load pdf with HttpClient:

import { Component } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';

  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('', { 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

Other Answers:

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

        .map((file:any) => file.json())
            (data:any) => {

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;

Related Issues:

ng2 pdf viewer Angular 6 support
EDIT: If you don't need zlib functionality please see @enyachoke 's solution using package.json belo...
ng2 pdf viewer ng2-pdf-viewer CORS
so if you still have problem with CORS i simply used the object tag and it's working for me use the ...
ng2 pdf viewer Several errors while building app with --prod flag
I got this error today as well It looks like the latest version of the pdfjs-dist npm went from vers...
ng2 pdf viewer Module '"../../../../@types/pdfjs-dist"' has no exported member 'PDFPromise'
Fixed in version 6.4.1 Bug Report or Feature Request Hello there i got the next error with ng2-pdf-v...
ng2 pdf viewer Display PDF from Byte Array
Here's and example how to load pdf with HttpClient: Let me know if it works for you ...
ng2 pdf viewer BUG | v6.1.0 | An accessor cannot be declared in an ambient context
So it seems like there's a breaking change in the typescript library After the upgrade to Angular 9 ...
ng2 pdf viewer Warning in angular v11
This is only a warning which happens because of how Mozilla ships the pdfjs-dist package ...
components Error: mat-form-field must contain a MatFormFieldControl.
You have to add to app.module.ts: Bug feature request or proposal: When doing a karma/jasmine test I...
angular Angular5.x lazyLoad problem, undefined is not a function
For others that find this issue via Google as i did: I had the same problem when trying to lazy load...
angular Cyclic dependency error with HttpInterceptor
I resolved simply not setting authService in constructor but getting in the intercept function. ...
angular cli Issue: Cannot read property 'thisCompilation' of undefined
Here is the answer from issues #9793 : npm remove webpack npm install webpack@3.11.0 ...
angular Uncaught Error: Can't resolve all parameters for ...
You are missing an @Injectable() annotation on your ApiService Support requests like these should li...
ngx bootstrap fix(tooltip): tooltip flickering when hover the mouse on the border on the tooltip position
Add pointer-events: none; to the tooltip css problem solved! .tooltip { pointer-events: none; } ...
angular Force reload/refresh current route with RouteReuseStrategy
Hi If you really need to trick the Router into reloading the component on each routerLink click ...
angular Misleading error message "Cannot find a differ supporting object '[object Object]'"
I just ran into the same issue I'm not sure if the recommended solution will work for my case ...
angular cli Error | Could not find plugin "proposal-numeric-separator" | Generating ES5 bundles for differential loading
Try to install @babel/compat-data: ~7.8.0 to devDependencies This is the only workaround which helpe...
angularfire Missing exported members after updating to Angular 6.0.0
It looks like rxjs-compat is missing Use npm i rxjs-compat to install the missing rxjs-compat. ...
sheetjs How to simply export a Worksheet to xlsx?
There are two issues: each object is mapped to a row so if you want a row with name John and city Se...
angular cli Using invalid environment causes error in build (was "ERROR in Cannot read property 'length' of undefined")
Probably not the same cause but we had the same error (Cannot read property 'length' of undefined) w...
angular cli ng serve method ip not open in another machines
The solution is simple Just bind to the correct interface address via ng serve --host= ...
angular cli Incorrect JS paths when ng build -prod is deployed in a subfolder
When you're deploying to non-root path within a domain you'll need to manually update the <base href...
angular update 2 to 4 has problem [ts] Property 'map' does not exist on type 'Observable<Response>'.
I met the same problem with the angular cli 6.0.0 and rxjs 6.1.0 And I solved the problem by replaci...
angular cli Installation error: permission denied for node-sas
sudo npm install -g --unsafe-perm --verbose @angular/cli Installation error (node-sass) with: node v...
angular cli ng build -prod Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
Instead of use ng build --prod use ng build --env=prod UPDATE As many of us (thx) have mention this ...
angularfire ERROR TypeError: Object(…) is not a function” using AngularFirestore and firebase
@jamesdaniels Yes npm install rxjs@6 rxjs-compat@6 --save It solved the issue. I want to use firebas...
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
angular cli Property 'controls' does not exist on type 'AbstractControl'.
Got it! Looked at the docs - FormArray The FormArray class contains the controls property ...
angular Angular2 AoT Compiler Errors
pls try /cc @chuckjaz When I try to compile my project with ngc it throws the below error: Error: Er...
angular cli [Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED)
I recomended change { path: 'user-panel' loadChildren: './user-panel/user-panel.module#UserPanelModu...
prettier Change HTML/JSX formatting to have one attribute/prop per line
The point I am trying to make is that the vertical space matters Wasting it (too much) has negative ...
angularfire @firebase/firestore: Firestore (5.8.0): timestampsInSnapshots
eg: app.module.ts Version info Angular: 7.2.1 Firebase: 5.8.0 AngularFire: 5.1.1 In the newest fireb...
angular cli AOT build fails
I noticed same problem and after npm i enhanced-resolve@3.3.0 I can build with AOT ...
angular cli Cannot find name 'require'. using relative paths...
Ahhh here we go try adding declare var require: any; To src/typings.d.ts I am using a config with re...
components [Table] Add example with dynamic columns
For those interested Bug feature request ...
angular starter How to include Twitter Bootstrap 3 using webpack
I just tested it now Hi I have taken a look at #214 & #215 but these don't really explain how to set...
angular HttpClient.delete() cannot handle a body in its request
It would be great to have body param in .delete() We just migrated our project to HttpClient and for...
ng bootstrap No provider for NgbActiveModal! => "Components as content"
try to provide NgbActiveModal on app.module Bug description: When trying to implement the Modal usin...
angular cli "No NgModule metadata found for 'AppModule'" after Upgrade to Angular 5.1.0 and AngularCli 1.6.0
I got the same error The issue is fixed only when i manually re installed angular/cli The webpack sh...
angularfire 5.2.1 AngularFireAuthGuard causes TypeError: source.lift is not a function
I worked in this way Performing basic docs for AngularFireAuthGuard produces an error related to sou...
angular cli ng serve doesn't listen other than localhost
Works with command ng serve --host OS? Windows 7 8 or 10 Linux (which distribution) Mac OSX ...
angular Http - Observable completed function not firing
Third callback haven't been called when error occures ES6 promises hasn't method finally only then a...
angular Using multiple components in different modules causing "Type X is part of the declarations of 2 modules" error
as @brandonroberts saids create a shared module like this: then use the SharedModule like this.. ...
core How to unit test a component with TranslateService and the translate pipe?
I'm just coming up to speed on this stack and was trying to wrap some tests around an Ionic componen...
angular cli ng: command not found
Removing NODE and using NVM instead fixed a lot of issues After installing angular-cli with the help...
angular cli ng build fails with error Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after updating to v1.3.0
I faced this issue many times recently and always the fix worked for me is : Bug Report or Feature R...
angular cli -bash: ng: command not found
This was a pain to figure out Please provide us with the following information: OS? Mac OSX (Seirra)...
angular cli Uncaught TypeError: Cannot read property 'apply' of undefined on new install
Downgraded to zone.js@0.8.5 and the problem disappeared. Bug Report or Feature Request (mark with an...
angular cli I am on Angular 5 and CLI 1.5 and I get an error
I faced this error after updating a non-CLI project to Angular 5 and @ngtools/webpack 1.8.0 ...
ionic framework Bugs when run ionic cordova run ios --device or use --target options
Hi @fwagner thank you for the good news I already build and upload to production So the problem here...