I'm new to Vue.js and would like to know if there's a way to view PDF files that are stored independently from the Vue project through said Vue application.
Here's what I need:
All PDF files are stored in a folder. I'd like to provide links to access them in the application that I get from the backend server. Upon clicking the link, the PDF should open in a new tab and the URL would simply be something like
file:///C:/Users/user/Downloads/campusmap.pdf
What I have tried so far:
<a :href="fileAddress">View file</a>
When I hover over the link on my browser, It shows the right URL but clicking on it does nothing.
If I right-click to open in a new tab, it says blocked (about:blank#blocked)
Using <router-link> shows
localhost:8080/C:/Users/user/Downloads/campusmap.pdf
when hovered over it.
Is there a way to be able to just view the PDF through a link the way I want? Please note that I can't store all the PDF files in the asset or public folders.
Thanks for your help!
You can't link to a file:// protocol url from a page sourced via the http(s):// protocol - this is a security measure built in to modern browsers. Your only option is to also serve up the local files behind a web server, or run the app locally behind a file:// url.