Could you put together a minimal, runnable reproduction (a small StackBlitz or a stripped-down component) that only includes the kendo-pdfviewer and your base64-loading logic — no menu, no dialogs, no other services?
We can attempt this.
Can you confirm whether the broken links happen on the very first document you view, or only after viewing a second/different document without a full page reload?
Broken links occur no matter when you view it. First, second...ninth.
Could you check the value of shadeContentOnMobile at the moment the link click fails, and inspect in DevTools whether any element (invisible or otherwise) is sitting on top of the PDF canvas?
shadeContentOnMobile is instantiated as false and looks to never be set to true
Hi Adam,
Thanks for sharing the document-viewer and base-page components. Before I can confirm a root cause in the PDFViewer itself, I need to flag two things:
1. These files aren't runnable on their own — they reference a lot of app-specific services (HealthCountsService, MedicalPassportService, RoadToWellnessService, dialog/notification services, <app-main-menu>, <app-startup>, etc.) that we don't have visibility into.
I tested the PDFViewer in isolation with a plain [url] binding, and links are clickable in both Text Selection and Panning modes, in the current version — so the component itself isn't broken by default (check the app that I attached in the previous ticket - pdfviewer-links.zip; you can use it as a base as well). That means the issue is very likely coming from something in how it's wired up in your app, not from the PDFViewer widget.
Could you put together a minimal, runnable reproduction (a small StackBlitz or a stripped-down component) that only includes the kendo-pdfviewer and your base64-loading logic — no menu, no dialogs, no other services? That will let us confirm the behavior directly rather than guessing.
2. In the meantime, two things in the code you sent look suspicious and are worth checking on your end:
<kendo-pdfviewer [data]="fileContents" [url]="urlSource" ...>In ngOnInit, only one of fileContents/urlSource gets set depending on the branch taken (documentID vs source vs customer document), but the other is never cleared. If this component instance gets reused for a second document in the same session (e.g., via Angular route reuse), you could end up with both data and url populated at once, which the PDFViewer doesn't support and can leave the viewer in an inconsistent state. Can you confirm whether the broken links happen on the very first document you view, or only after viewing a second/different document without a full page reload?
<div [ngClass]="{ 'dull-mobile': shadeContentOnMobile }" (click)="shadeContentOnMobile = false">
<main><div class="container"><router-outlet></router-outlet></div></main>
</div>If shadeContentOnMobile is ever true while viewing the PDF (e.g., left over from the mobile menu state), and your global CSS for .dull-mobile adds an overlay over the content, that overlay could be silently intercepting clicks on the PDF's links — independent of anything the PDFViewer is doing. Could you check the value of shadeContentOnMobile at the moment the link click fails, and inspect in DevTools whether any element (invisible or otherwise) is sitting on top of the PDF canvas?
Once we have either a minimal repro, we can narrow this down much faster. Thank you for your understanding.
Regards,
Martin Bechev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
It appears I made a mistake in the components I originally added. We are using the following document-viewer component which uses the kendo-pdfviewer.
In my testing documentId is getting set as a query parameter and thus we call this.viewDocument(). That retrieves the contents and apparently creates a new blob and calls blobToBase64() giving it the new Blob.
Then in our case we are getting to the "application/pdf" portion of the switch statement and that should be all that is needed to get the pdf to show but for some reason the link is not found. Perhaps you can figure out why....see attached components.
I am attaching the BasePageComponent for reference since the document-viewer component extends the BasePageComponent but it should really have no impact.
Hi Adam,
Thank you for the attachments. I checked the files, but I didn't find anything suspicious in the PDFViewer configuration or the installed package versions.
I also tried to reproduce the issue by creating a sample PDFViewer in an Angular 18 application with Kendo UI for Angular v18.5.2, and I can confirm that the links in the PDFViewer are clickable. I'm also attaching the runnable project I used for the test.
To run the application, execute npm install followed by ng serve. Once the application is running, please check the demo and let me know whether the Start 30 day FREE Trial button is clickable on your side.
If your application is configured differently or there are any important parts of the setup that are not included in the provided files and could potentially affect the behavior, please share them with us. This will help us narrow down the difference between the working sample and your application and continue the investigation.
Regards,
Martin Bechev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
This does not appear to have fixed the issue. I am attaching the package.json in a zipped format along with our pdfviewer component zipped as well.
I am building this and publishing to a server so node_module should be irrelevant. However, I have done as you suggested and reinstalled dependencies just in case but I am getting the same result.
I am using the same pdf that you guys use in your demos of the component and trying to click on the "Start 30 day free trial" button but I am not able to.
Hi Adam,
Make sure all Kendo packages installed for the project are at the same version. I
Installing v18.5.0 also requires installing v10.3.1 of the Kendo theme. For a clean installation, remove the node_modules and package-lock.json files and reinstall the dependencies. Also, make sure the PDF that has been viewed has clickable links. You can try with the PDF we use in the documentation of the PDFViewer. Attaching it to this reply as well.
In case the issue persists, please provide more details about your setup - package.json file, component HTML, and TypeScript code.
Let us know how it goes.
Regards,
Martin Bechev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hi, I have just updated to kendo 18.5.0 and I am not seeing the links being clickable in some of my test files. Do you know if there are other dependencies I could be missing or need to update?
I checked here and I have all of the following packages listed here at 18.5.0 as well:
https://www.telerik.com/kendo-angular-ui/components/pdfviewer/installation/dependencies-and-utils
Hi everyone,
The feature is available in version 18.5.0.
Regards,
Yanmario
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.