使用 VueJS 在另一个窗口中打开 PDF 文件 [英] Opening a PDF file in another window with VueJS
问题描述
在我之前的 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()
:
With openPdf()
in my component's methods:
openPdf () {
javascipt:window.open('./../assets/Resume_Christopher_Kade.pdf');
}
点击链接时,会打开一个新页面,网址如下:
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 3 创建的在本地运行的项目(我还没有构建我的项目).
My solution is for projects created with Vue CLI 3 running locally (I haven't built my project yet).
我的问题和你的差不多.我只想要 <a>
链接,它可以在新选项卡上打开我的 pdf 文件,但我的 url 将单个哈希连接到我的路径并将我重定向到我的主页.这是一个令人惊讶的简单修复:
My issue was similar to yours. I just wanted <a>
link that opened up my pdf file on a new tab but my url concatenated a single hash to my path and redirected me to my home page. And it was a surprisingly easy fix:
<a href="./resume.pdf" target="_blank">resume</a>
只是一个点、正斜杠和我的文件名.我的文件位于 root > public 文件夹下.
Just a dot, forward slash, and my file name. And my file is located under root > public folder.
相对路径导入
当您使用相对路径引用静态资源时(必须以.) 在 JavaScript、CSS 或 *.vue 文件中,资产将被包含进入 webpack 的依赖图...
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
这篇关于使用 VueJS 在另一个窗口中打开 PDF 文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!