How to fetch local links from PDF using ngx-extended-pdf-viewer

Question

We have an Angular app that renders pdf files from the server using ngx-extended-pdf-viewer. Some pdf files contain external links pointing to external sites https://... and therefore they will be opened in a new browser tab. There are also links pointing to objects within the Angular app. These links use an internal id such as 12345.

When opening a pdf file from a normal Windows destop, then the internal links shows like 'file:///12345' but when opening the pdf within the Angular app using ngx-extended-pdf-viewer, then the links are gone and therefore we cannot fetch them to route to an internal page within the app.

The well documented showcase https://pdfviewer.net/extended-pdf-viewer/links describes that these kind of links are not supported.

Is there a way that I can fetch links not starting with https://... so I can route to internal page in our scenario?

Answer 1

Updated answer after reading the question properly:

"Accessing an object within the Angular application" can mean many things - but basically every scenario I can think of revolves around calling a method in an Angular component or service, and to make Angular's change detection aware of it.

First, you need to add an onclick handler calling your Angular method. You can do this by registering the (textLayerRendered) and using it to modify the HTML code that's been rendered by pdf.js. Among other things, it contains you special file:// links. Add an onclick handler calling your Angular method.

Next, you've got the problem that your Angular method is called, but outside the Angular context. To solve that, have NgZone injected. Implement the code you want to run inside Angular like so:

public onCustomLinkClick(link): void {
  zone.run(() => {
     // put your custom code here
  });
}

That should do the trick. Note that I haven't tried the sourcecode, but I'm going to add a working demo to the showcase soon.

Original answer covering how to access traditional file:// URLs:

I'm afraid you've run into an issue that's not the fault of ngx-extended-pdf-viewer. It's a problem of browser applications in general. If you're able to open a file on your user's hard disk programmatically, you're probably able to read all of their files. Actually, when the internet was younger, there were loopholes allowing you to read arbitrary local files.

Now imagine you're a hacker, trying to steal some sensitive data. Writing a browser application reading arbitrary local files is a godsend to you! That's why every contemporary browser goes to great length to forbid such an access.

There's one exception: if the user agrees, you can access local files. To do so, the user has to use either drag'n'drop or to use a "file open" dialog.

Long story cut short: as long as you're writing an application running in the browser, you're out of luck. If you're writing an application using Electron or Cordova, I've got good news for you: there's an open ticket to eliminate the restriction in such an environment (https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues/938). I've even given it high priority, so the feature will probably land soon.