Vue.js 如何在vue中链接到pdf？

我正在尝试在我的vue应用程序上创建指向本地pdf文件的链接。现在这是我的问题

我的PDF位于assets/static/中，目前正在像这样链接到它们

<template>
  <div id="forms" class="view-wrapper">
      <h3>Downloadable Forms</h3>
      <a href="../assets/static/Direct Deposit Form.pdf">Claim Form</a>
  </div>
</template>

可下载表格

这会在页面上显示一个链接，但当我单击它时，我会看到应用程序上的一个空白页面，只有导航栏和页脚，中间没有任何内容。我希望它能在另一个选项卡的浏览器pdf查看器中显示文档。我们将非常感谢您的帮助

---

编辑：已解决：@dan帮助我意识到我只需使用一个点即可访问我的资产文件夹。

要在浏览器中呈现pdf，请使用

。除非将反应式数据绑定到元素，否则不必在vue中执行任何不同的操作。查看这是一个类似的问题。

要在浏览器中呈现pdf，请使用

。除非将反应式数据绑定到元素，否则不必在vue中执行任何不同的操作。检查这是一个类似的问题。

如果您想从服务器提供文件，您应该将它们放在

public

中，而不是

src/assets

，后者用于在客户端捆绑文件。我尝试将一个文件移动到公共位置，然后用标记链接到它，但它仍然只是打开一个只有页眉和页脚的空白页面。一旦它进入

public>assets>static

，您就可以这样做：

使用一个点，而不是两个。这终于奏效了！非常感谢你！如果要从服务器提供文件，则应将其放入

public

而不是

src/assets

，后者用于在客户端捆绑文件。我尝试将一个文件移动到公共位置，然后用标记链接到它，但它仍然只是打开一个只有页眉和页脚的空白页面。一旦它进入

public>assets>static

，您就可以这样做：

使用一个点，而不是两个。这终于奏效了！非常感谢你！谢谢，但我实际上是想在一个新的选项卡中打开pdf。我正在复制一个使用的静态站点，并在另一个选项卡的浏览器pdf查看器中打开pdf。有什么想法吗？明白了。为什么不使用

target=“\u blank”

链接到一个新页面，然后在该页面上使用呈现pdf的iframe。此外，请查看此线程在浏览器中呈现pdf有几种方法。谢谢，但我实际上正在尝试在新选项卡中显示pdf。我正在复制一个使用的静态站点，并在另一个选项卡的浏览器pdf查看器中打开pdf。有什么想法吗？明白了。为什么不使用

target=“\u blank”

链接到一个新页面，然后在该页面上使用呈现pdf的iframe。此外，请查看此线程。在浏览器中呈现pdf有几种方法。