CODEWITHSUNDEEP
javascripthtmlvue.jspdffrontend
Avi Dave
Avi Dave

Reputation: 83

Opening pdf in a new window through vuejs

Currently, I am developing my personal website using vuejs and I am running into an error when I am trying to open up my resume in another window through a button click. What is happening is that, when I click the corresponding button, instead of opening-up the pdf, it renders the home page again. Here is my button HTML element:

<button class="button in-left2" v-on:click="openPdf()" target="_blank">Resume</button>

Here is the corresponding Method

openPdf(){
  window.open("./Avi-Dave-Resume.pdf") 
}

My Resume is in the directory where I am using the vue cli to render my website. My Resume is in the directory where I run my server. I feel like my file path is wrong, but would love to know more about the issue.

Upvotes: 2

Views: 5499

Answers (3)

jhabar singh Bhati
jhabar singh Bhati

Reputation: 109

You can create a page for displaying the pdf

use iframe to show pdf

<iframe src='pdf_name.pdf' ></iframe>
  • Inside routes.js create route to that page
  • when you click on that page it will route you to that page

Upvotes: 1

Davud Safarov
Davud Safarov

Reputation: 518

My Resume is in the directory where I run my server

Put your resume in public folder, like: public/Avi-Dave-Resume.pdf

and in vue:

<a href="./Avi-Dave-Resume.pdf" target="_blank">pdf</a>

for more, refer to here

Upvotes: 2

Danizavtz
Danizavtz

Reputation: 3270

You can achieve the same result changing your current html tag to another.

<a href="path/to/resume/Avi-Dave-Resume.pdf" class="button in-left2" target="_blank">Resume</button>

With that you can remove the v-on:click="openPdf() and the function openPdf().

They will not be needed.

Upvotes: 0

Related Questions