VueJS：查看存储在驱动器中的 PDF 文件（项目文件夹外）

Question

我是 Vue.js 的新手，想知道是否有办法通过上述 Vue 应用程序查看独立于 Vue 项目存储的 PDF 文件。

这是我需要的：

所有 PDF 文件都存储在一个文件夹中。我想在从后端服务器获得的应用程序中提供访问它们的链接。单击链接后，PDF 应在新选项卡中打开，URL 将类似于 file:///C:/Users/user/Downloads/campusmap.pdf

到目前为止我所尝试的：

<a :href="fileAddress">View file</a>

当我将鼠标悬停在浏览器上的链接上时，它会显示正确的 URL，但单击它什么也没做。 如果我右键单击以在新选项卡中打开，它会显示已阻止 (about:blank#blocked)

使用<router-link> 显示 localhost:8080/C:/Users/user/Downloads/campusmap.pdf 当悬停在它上面时。

有没有办法以我想要的方式通过链接查看 PDF？请注意，我无法将所有 PDF 文件存储在资产或公用文件夹中。

感谢您的帮助！

Answer 1

您不能从通过http(s):// 协议获取的页面链接到file:// 协议网址 - 这是现代浏览器内置的安全措施。您唯一的选择是同时在 Web 服务器后面提供本地文件，或者在 file:// url 后面本地运行应用程序。