1

I want to be able to open a pdf on VueJS. The pdf file is local and cannot be online.

(I'm using Quasar's button but it functions the same as a HTML button)

I have tried:

<q-btn id="mebtn" href="../assets/resume.pdf">Click Me</q-btn>

Or

<input type="button" value="Open" onClick="window.open('../assets/Resume.pdf');

Error I'm getting:

Cannot GET ../assets/Resume.pdf

I want to be able to click the button and then my pdf pops up on another tab

Other normal html solutions WILL NOT WORK

its.david
  • 2,115
  • 5
  • 16
  • 31
  • What if you include the `file:///` protocol [in your href](https://stackoverflow.com/questions/18246053/how-can-i-create-a-link-to-a-local-file-on-a-locally-run-web-page)? – PatrickSteele Dec 11 '17 at 20:46
  • No, my VueJS Application is running on a server. I have to somehow declare it in the server and then get it. A simple `http://localhost:8081/assets/Resume.pdf` will not work in this case much less file:/// – its.david Dec 11 '17 at 20:56

3 Answers3

1

Assuming your directory is like:

src -> assets --> Resume.pdf

You can access it by:

<input type="button" value="Open" onClick="readFile()");


methods: {
  readFile() {
     window.open('src/assets/Resume.pdf', '_blank') //to open in new tab
   }
}
DjSh
  • 2,776
  • 2
  • 19
  • 32
0

Using click event, window.open() and require.

<span @click="handleClick">a pdf file</span>

handleClick: () => {
  window.open(require('/path/to/my/pdf.pdf'), '_blank)
}
tat757
  • 1
  • 2
-2

In VueJS, there's a folder called "static" or "statics" and all you have to do is move the file to "statics" to be able to access it through local directory.

its.david
  • 2,115
  • 5
  • 16
  • 31
  • This depends completely on your setup and has nothing to do with VueJS. – webnoob Dec 11 '17 at 21:46
  • What do you mean setup? I tried putting it in other folders and it did not work. When you work with VueJS and want to access files, you can only do so to node modules and statics folder. The content in other folders become dynamic and simply cannot be retrieved with a “src” or even “href” pointing towards it. Also you’re more than welcome to show your solution :) – its.david Dec 12 '17 at 11:54