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!

CodePudding user response：

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.