在我以前的 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 中那样简单明了?我错过了什么吗?
最佳答案
你知道了吗?
我的解决方案是针对使用本地运行的 Vue CLI 3 创建的项目(我还没有构建我的项目)。
我的问题和你的很相似。我只想 <a>
在新选项卡上打开我的 pdf 文件的链接,但我的 url 将单个哈希连接到我的路径并将我重定向到我的主页。这是一个非常简单的修复:
<a href="./resume.pdf" target="_blank">resume</a>
只是一个点、正斜杠和我的文件名。我的文件位于 root > public 文件夹下。
Relative Path Imports
When you reference a static asset using relative path (must start with .) inside JavaScript, CSS or *.vue files, the asset will be included into webpack's dependency graph...
https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports
关于pdf - 使用 VueJS 在另一个窗口中打开 PDF 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48517942/