使用VueJS在另一个窗口中打开PDF文件

问题描述

在以前的Angular应用中，我可以在另一个窗口中打开我的简历，例如:

In my previous Angular app I was able to open my resume in another window like such:

<a class="link popup" href="javascript:void(0);" onclick="javascipt:window.open('./../../assets/Resume_Christopher_Kade.pdf');">Resume</a>

在用Vue重写我的网站时，我注意到将其更改为以下内容后，它无法按预期运行:

While rewriting my website with Vue, I noted that it did not work as intended, after changing it to:

<a class="link popup" href="javascript:void(0);" v-on:click="openPdf()">Resume</a>

在组件的方法中使用openPdf():

openPdf () {
    javascipt:window.open('./../assets/Resume_Christopher_Kade.pdf');
}

单击链接时，将打开一个新页面，该页面指向以下URL:

When clicking the link, a new page opens to the following URL:

http://localhost:8080/assets/Resume_Christopher_Kade.pdf

同时在我的屏幕上显示空白路线，而不是在浏览器的pdf查看器中显示pdf.

while showing an empty route on my screen instead of displaying the pdf in the browser's pdf viewer.

此问题可能与我在Vue中处理路由的方式有关:

This issue might be related to the way I handle routes in Vue:

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/work',
      name: 'Work',
      component: Work
    },
    {
      path: '/posts',
      name: 'Posts',
      component: Posts
    },
    { path: '*', component: Home }
  ]
})

为什么它不像Angular那样简单?我想念什么吗?

Why isn't it as straightforward as in Angular? Am I missing something?

推荐答案

假定您具有Vue CLI默认生成的static文件夹，您只需将PDF放在此处并按<a href="./../static/file.pdf" target="_blank">所示进行操作即可.

Assuming that you have static folder generated by default by Vue CLI you can simply put the PDF there and do it as follows <a href="./../static/file.pdf" target="_blank">.

这篇关于使用VueJS在另一个窗口中打开PDF文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！