How to use prop 'url' in PDF viewer

[nEMO]

Hello!

I'm using KendoReact PDFViewer and I've encountered a problem with the URL prop not working with regular HTTP URLs, for example:

<PDFViewer url="https://example.com/sample.pdf" />

The PDF simply won't load.

Please help:

In what cases does the URL prop actually work in PDFViewer?

[Vessy]

Hello,

The url prop of the KendoReact PDFViewer works when the following requirements are met:

• CORS Support: The PDF file must be hosted on a server that allows cross-origin requests (CORS) from your domain. If CORS is not enabled, the PDFViewer cannot fetch the file due to browser security restrictions.
• Direct PDF File: The URL should point directly to a valid, publicly accessible PDF file (e.g., it ends with .pdf and returns a PDF file without redirection or authentication).
• No Special Authentication: If the file is behind authentication (such as requiring login or authorization headers), the PDFViewer cannot access it directly. In such cases, you need to fetch the file manually and provide it as a base64 string to the viewer.
• Accessible Resource: The file must not be blocked by firewalls, network rules, or require additional headers (such as tokens) unless you handle the fetching yourself.

Below you can see sample configuration of the same:

<PDFViewer url="https://your-site.com/pdf/dummy.pdf" />

This works if the file is accessible and CORS is allowed.

Below you can see how you can troubleshoot why a pdf could be missing in the PDF Viewer:

• Open your browser's developer tools and check the Network tab for failed requests or CORS errors.
• Try accessing the PDF URL directly in your browser to confirm it’s publicly accessible.
• Test with a known public PDF (like the example above) to verify your PDFViewer setup.
• If you need to load protected PDFs, fetch the file yourself using custom headers, convert it to a base64 string, and pass that to the url prop.

Please, go through the steps above and let me know in case I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik