CODEWITHSUNDEEP
pdfvue.jsvuejs2
Christopher
Christopher

Reputation: 1772

Opening a PDF file in another window with VueJS

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>

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>

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

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

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 }
  ]
})

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

Upvotes: 8

Views: 26168

Answers (3)

WildClown
WildClown

Reputation: 11

I've got the following error when trying to do the exact same thing: Expose my resume

ERROR in ./src/assets/resume/Gabriel_Teixeira_Soares_de_Almeida_Resume.pdf 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

In order to ease the process, I've seen some pages that redirects to a google drive link, so you can still href, but to a link outside of your domain

<v-btn
  v-bind:href="resumeLink"
  target="_blank"
  color="primary"
>
  <label class="primaryText--text font-weight-light">
    Resume
  </label>
</v-btn>

Being 'resumeLink' the same link as my drive PDF

For projects in cloud, probably you shall get the Blob file URL

Upvotes: 0

Daniel Danielecki
Daniel Danielecki

Reputation: 10512

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">.

Upvotes: -1

Leesa
Leesa

Reputation: 760

Did you figure it out?

My solution is for projects created with Vue CLI 3 running locally (I haven't built my project yet).

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>

Just a dot, forward slash, and my file name. And my file is located under root > public folder.

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

Upvotes: 5

Related Questions