Ng2-pdf-viewer: Performance issue

[robinmaple]

Bug Report or Feature Request (mark with an x)

- [X ] bug report -> please search issues before submitting
- [ ] feature request

The viewer is very slow with not that large PDF file(around 10 pages, 600k size), especially when the source is Uint8Array. It took a couple of seconds for the scrollbar to respond to page up/downs each time.

[sajagekar]

I am also facing the same issue. It hangs on scrolling . Looks memory problem or it is taking time to respond.

• [ X] bug report

[CraigFreeman]

this is quite a problem for me :(

[UlricW]

We have the same problem

[sajagekar]

Guys root cause is [render-text]="true", set it to false, this has solved my problem.
When it is set to true it is creating html elements which is I think creating memory problem.

[UlricW]

No effect for me sorry.
When I use the performance profiler from chrome for each scroll (for a 100 pages pdf) it seems to reconstruct all canvas in the dom and took between 500 and 800 ms (Paint in the performance profiler), I think this is the cause of the scrolling lag

[UlricW]

To gain some memory, I simply add some destruction and unreferencing variable.

• In the update function I add this line at the end:
  this._pdf = null

• In the loadPDF function I add these lines inside the if(this.lastLoaded === this.src) :
  loadingTask.destroy();
loadingTask = null;
src = null;

It's a known memory leak in angular, when you don't unreference your variable the garbage collector doesn't take it and doesn't release the memory. If someone with the knowledge of the code can unreference some variables like the example, the usage of the memory will decrease

[Herdubreid]

After upgrade to Angular 5 and ng2-pdf-viewer 5.1 rendering Uint8Array became painfully slow (4mb pdf file took minutes).

This pain vanished in production build (ng build --prod).

[sunil233]

Bind the pdfsrc with ArrayBuffer instead of Uint8Array ..Then performance will improve a lot.
See below for ur reference:
html

.ts
pdfSrc: ArrayBuffer;
this._fileservice.downloadfilewithbytes(reportdata)
.subscribe((filebytes: ArrayBuffer) => {
this.pdfSrc = filebytes;
});

service.ts
public downloadfilewithbytes(data: any): Observable {
var apiUrl = this._config.ApiUrl + "api/Filedownload/";
var reportData = JSON.stringify(data);
return this.http.post(apiUrl, reportData, { responseType: 'arraybuffer' });
}

Note : the Response from the Api is bytes array

[Herdubreid]

A further investigation indicate a conflict with ngrx/store-devtools.

In my module I have:

!environment.production ? StoreDevtoolsModule.instrument() : []

If I set the production variable to true in environment.ts, then performance is fine.

[KalaivananE]

Is that issue fixed? i'm also looking for the same.When i'm trying to render pdf with large width and height it is slow even the file size is 700 kb.I.m using ng2 pdf viewer.
can anyone suggest the solution for this memory issue would be grateful.
@VadimDez

[ViniciusLelis]

A further investigation indicate a conflict with ngrx/store-devtools.

In my module I have:

!environment.production ? StoreDevtoolsModule.instrument() : []

If I set the production variable to true in environment.ts, then performance is fine.

This really helped a lot! Rendering the pdf is way faster when production is set to true.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.