I'm working on a portfolio website and I need to open a resume.pdf
file from local files when a button is clicked but I cant make it work. I'm using gridsome
and vue.js. I tried this code initially:
<a class="cv-button float-right"
href="../assets/resume.pdf"
target="_blank">MY CV</a>
But when I hit the link(button) I get this error:
Cannot GET /src/assets/resume.pdf
and the url it goes to is:
http://localhost:8080/src/assets/resume.pdf
The problem I'm facing has been asked before:
Opening a PDF file in another window with VueJS
and Open a PDF using VueJS.
I tried to use the solutions provided but none of them actually worked and I got almost the same error every time! I have no problem loading images but this pdf file just doesn't work. The file is located in src -> assets -> resume.pdf
. Please note that I tried many methods open the file but all failed, including using vue.js methods
and windos.open()
in javascript or the required
keyword or using different ways to give the path of the source file such add @/assets/resume.pdf
etc.
below is my package.json file:
{
"name": "portfolio.farzinnasiri.com",
"version": "0.0.2",
"private": true,
"scripts": {
"build": "gridsome build",
"develop": "gridsome develop",
"explore": "gridsome explore"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/vue-fontawesome": "^0.1.9",
"@gridsome/source-filesystem": "^0.6.2",
"@gridsome/transformer-remark": "^0.5.0",
"gridsome": "^0.7.0",
"vue-typer": "^1.2.0"
},
"devDependencies": {
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2"
}
}
and the preview of the website is here:http://farzinnasiri.ir. Of course I haven't yet added the pdf file but theoretically when some one hits the MY CV
button, he/she should be directed to the resume file in the browser...
on last thing is that I couldn't find the pdf file in the final builded project(dist
folder) so maybe vue.js can't read the file in the first place!
Please give me some help here. Thank you for your attention
OK, So i fixed the problem in gridsome
by simply putting my pdf files in the static
directory which gridsome
makes when the project is created. Gridsome puts every thing from that folder directly to the dist/
folder so I just needed to give it a path like:
<g-link class="cv-button float-right" href="/resume.pdf" target="_blank">MY CV</g-link>