Pdf-viewer is not fetching files issue

[markoberger]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [ X] Bug report -> Please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

Hello, I'm using ng-pdf-viewer 10.0.0. on the angular 16 app. In my component I'm using dynamic components with ViewContainerref.createComponent(). I have a widget that needs to show a pdf in it. So I supplied it URL where to fetch it.

<pdf-viewer
                style="display: block; width: 100%; min-height: 800px"
                [src]="url"
                [show-all]="false"
                [autoresize]="true"
                [original-size]="false"
                [fit-to-page]="true"
                [render-text]="false"
                (error)="onError($event)"></pdf-viewer>

The problem is that on the first init, pdf-viewer is not making a request to fetch the pdf. But when I do Next I make a request without a problem. I made bad workaround with setTimeot(() => { this.url = this.initUrl() }, 1000)

Thx

[axelsilvaferreira]

Same problem, tried the setTimout, tried compiling with ES2015, tried downloading PDF manually e binding it to src... no luck

[vishwanath1004]

Any updates on the issue?

[axelsilvaferreira]

Try commenting the hole app, and inject the pdf directly on you appComponent, then try adding dependencies one by one and I found what was conflicting with the library. This approach worked for me.

[vishwanath1004]

Thanks for the reply. If i do ionic serve then am able to preview the attached PDF file but not in mobile app and there is no error at console

[PagnoDunadan]

I've created a directive that will run more change detection cycles until PDF is finally loaded or error happens. Tested in version 9.1.5.

<pdf-viewer
    class="pdf-viewer"
    appRefreshPdfViewer
    [original-size]="false"
    [render-text]="true"
    [src]="pdfUrl"
></pdf-viewer>

@Directive({
    standalone: true,
    selector: '[appRefreshPdfViewer]',
})
export class RefreshPdfViewerDirective implements OnChanges, OnDestroy {
    @Input({ required: true }) src: PdfViewerComponent['src'];

    private readonly subs = new SubSink();

    constructor(
        @Self() private readonly pdfViewerComponent: PdfViewerComponent,
        private readonly changeDetectorRef: ChangeDetectorRef,
    ) {}

    ngOnChanges(changes: NgChanges<RefreshPdfViewerDirective>): void {
        if (changes.src) this.start();
    }

    ngOnDestroy(): void {
        this.stop();
    }

    private start(): void {
        this.stop();
        if (!this.src) return;

        // https://github.com/VadimDez/ng2-pdf-viewer/issues/1036
        this.subs.sink = this.pdfViewerComponent.afterLoadComplete
            .pipe(take(1), takeUntil(this.pdfViewerComponent.onError))
            .subscribe(() => {
                window.dispatchEvent(new Event('resize'));
            });

        // https://github.com/VadimDez/ng2-pdf-viewer/issues/1037
        this.subs.sink = interval(500)
            .pipe(takeUntil(merge(this.pdfViewerComponent.afterLoadComplete, this.pdfViewerComponent.onError)))
            .subscribe(() => {
                this.changeDetectorRef.markForCheck();
            });
    }

    private stop(): void {
        this.subs.unsubscribe();
    }
}

[ashleynguci]

I got similar issue with Angular 16.
I fixed it by removing the "display: block" in style attribute.

Also using ng-pdf-viewer 9.1.5 "pdfjs-dist": "~2.14.305"