Search code examples
vue.jspdfgridsome

error while opening pdf file in vue.js from local project folders

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

Solution

  • 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>