Opening pdf in a new window through vuejs

user_5376723 0
Viewed 2714

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.

vue.js frontend pdf html javascript
3 Answers

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

user_85882410

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
user_106124070

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.

user_45981750
Related