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

Question

在我之前的 Angular 应用程序中，我能够像这样在另一个窗口中打开我的简历：

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

在使用Vue重写我的网站时，我注意到在将其更改为以下内容后，它并没有按预期工作：

<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：

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

当我在浏览器的PDF查看器中显示PDF时，屏幕上会显示一个空路由。

这个问题可能与我在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 那样简单明了呢？我有什么遗漏吗？

- Christopher

---

可以是您的Web服务器配置，例如：如果文件存在。 - malcolm

Answer 1

你解决了吗？

我的解决方案适用于使用Vue CLI 3创建的本地项目（我还没有构建我的项目）。

我的问题和你的类似。我只想要一个在新标签页中打开我的pdf文件的<a>链接，但我的url将一个单一的哈希连接到我的路径上，并将我重定向到首页。这是一个令人惊讶的简单修复方法：

<a href="./resume.pdf" target="_blank">resume</a>

只需一个点、斜杠和我的文件名。我的文件位于根目录下的public文件夹中。

相对路径导入

当您在JavaScript、CSS或*.vue文件中使用相对路径（必须以.开头）引用静态资产时，该资产将包含在webpack的依赖图中...

https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports

- Leesa

---

它没有起作用是因为我的文件（实际上是一个链接）没有“.pdf”扩展名。已修复。 - DevonDahon

不起作用。仍然遇到与问题描述相同的问题。它总是重定向到 localhost://assets/filename.pdf。 - Soorya

Answer 2

假设您使用Vue CLI默认生成的static文件夹，您可以将PDF文件放在那里，并按照以下方式进行操作：<a href="./../static/file.pdf" target="_blank">。

- Daniel Danielecki