通过vuejs在新窗口中打开pdf

Question

目前，我正在使用 vuejs 开发我的个人网站，当我尝试通过单击按钮在另一个窗口中打开我的简历时遇到错误。发生的事情是，当我单击相应的按钮时，它没有打开 pdf，而是再次呈现主页。这是我的按钮 HTML 元素：

<button class="button in-left2" v-on:click="openPdf()" target="_blank">Resume</button>

这里是对应的方法

openPdf(){
  window.open("./Avi-Dave-Resume.pdf") 
}

我的简历位于我使用 vue cli 呈现我的网站的目录中。我的简历在我运行服务器的目录中。我觉得我的文件路径有误，但很想了解有关此问题的更多信息。

Answer 1

您可以创建一个用于显示 pdf 的页面

使用 iframe 显示 pdf

<iframe src='pdf_name.pdf' ></iframe>

• 在 routes.js 中创建到该页面的路由
• 当您点击该页面时，它会将您引导至该页面

Answer 2

我的简历在我运行服务器的目录中

将您的简历放入公共文件夹，例如：public/Avi-Dave-Resume.pdf

在 vue 中：

<a href="./Avi-Dave-Resume.pdf" target="_blank">pdf</a>

更多信息请参考here

Answer 3

您可以将当前的 html 标记更改为另一个。

<a href="path/to/resume/Avi-Dave-Resume.pdf" class="button in-left2" target="_blank">Resume</button>

您可以删除v-on:click="openPdf() 和函数openPdf()。

他们将不再需要。