PDF file rendering problem

[ishanuda]

Hi, I am trying to load a PDF file from the server. But, before loading the PDF file, an ugly gray screen with unstyled elements are shown as attached in the image. after a while, it loads the pdf file with no problem.

My settings are as follows:

<ngx-extended-pdf-viewer
    [src]="url"
    backgroundColor="#f1f1f1"
    useBrowserLocale="true"
    delayFirstView="1000"
    [showHandToolButton]="true"
    [showSpreadButton]="true"
    textLayer="true"
    height="calc(100vh - 140px)"
  >
  </ngx-extended-pdf-viewer>

Am I doing anything wrong here?

Thank you very much.

[stephanrauh]

You can drop the delayFirstView bit. I never removed the attribute because it might solve timing problems I'm not aware are. However, if you're using a current version of ngx-extended-pdf-viewer, you don't need it. It was just a workaround until I learned how the pdf.js library works internally.

[stephanrauh]

Other than that, I don't have any idea. How long do you see the gray screen? I'm always confused to see it when I've broken the build, but I never see it when the code compiles correctly.

[ishanuda]

Hi, Thank you for the quick reply, I see the above screen, will say about 1 or 2 seconds and then loads the page fine, no errors,

URL (PDF src) set to request the file from the back end server which is developed wrapping NestJS and used the following as the response to the GET request method.

res.sendFile(file-path/file-name.pdf);

I tried to load the ngx-extended-pdf-viewer without [src]="" and it loads an empty screen, still the screen like the above,

So it seems not a delay of loading the PFD, but a delay of loading CSS or something else, as it still gives the same screen with no [src] provided.

Application is on Angular 8 with the Material custom theme. ngx-extended-pdf-viewre: ^2.0.0-alpha.2

Thank you very much

[stephanrauh]

You could get rid of the option delayFirstView="1000" nonetheless. :) If you haven't do so already, that is.

If the delay still exists, maybe it's instructive to check the network tab of your browser. Are there mayor delays?

You can also force eager loading of the huge JavaScript files. On a slow network, lazy loading may add a noticable delay. The easiest way to do so is to add these lines to the angular.json:

json
"scripts": [
  "node_modules/ngx-extended-pdf-viewer/assets/pdf.js",
  "node_modules/ngx-extended-pdf-viewer/assets/viewer.js",
  (put any additional JavaScript file here)
]

[ishanuda]

Hi, Thank you for the quick reply,

Developments/ Testings are done locally, Also, I have already added all the required files to the angular.json file as in the image attached, according to the doc.

NOTE: also I removed delayFirstView="1000" from the config.

regards

[WayneBarnard]

Hi

I can confirm I am getting a similar issue. I am using the base64Src property.

So in my component I set it like this: that.pdfViewer.base64Src = result.formData;

If I use a small one or two page PDF, it works great, everytime! But the moment it uses a large PDF, it only works some of the times, mostly I get the gray screen....

So its weird, with the large files it only works sporadically...

Please help!!

[stephanrauh]

@ishanuda Did you manage to solve the issue?

@WayneBarnard Sorry for the late reply - I was busy during the last couple of weeks. I've tried the PDF viewer with giant PDF files, up to 100 megabytes. So I wonder what's different in your project. Do you have an example PDF file?

[WayneBarnard]

@stephanrauh I managed to fix it by adding a ngIf to the element, and only load once the property I bind to the base64Src property is loaded. BUT...

I have a new problem now...

Once the pdf is loaded, it always scrolls to the middel of the pdf ;( if it is a 10 pager, after a second it is loaded, it jumps to page 5...

any idea why?

[stephanrauh]

@WayneBarnard That's two questions. Or two topic, since your first sentence is a solution, not a question. :)

Ad 1: You *ngIf solution smells like a timing problem. pdf.js relies heavily on asynchronous method calls. I had a hard time getting the timing right. That's why I added attributes like delayFirstView="1000". It adds a small delay between loading the JS code of the library and displaying the PDF file. Maybe it's worth a try on you project, too. However, I suspect your current solution is more efficient than my brute-force approach.

Ad 2: scrolling to the middle of the PDF file is weird. I can't even imagine what's going wrong. What happens if you set [page]="1"? Another theory: does every page have a page number? PDF also has the concept of a "page label". Many book - especially old book - have separate page number for the main body and the table of contents. The table of contents often has roman number, while the main body uses arabic numbers. What about your PDF file?

Be that as it may: it'd be great to ask this as a new issue, especially if you've got an idea how I can reproduce your bug. Currently, I'm clueless. Send me a reproducer - i.e . simple but complete program reproducing the bug without forcing me to install any third-party stuff - and I'll happily debug it.

By the way, if you've found a solution yourself, please share it with us. Usually, I update the documentation so the rest of the community benefits from your mishap, saving them from running into the same trap. Thanks in advance!

Best regards, Stephan

[stephanrauh]

I haven't heard from you for a long time, so I'll close the bug, hoping you've found a solution to the bug.

Best regards, Stephan