How do I link to a pdf in vue?

Question

I'm trying to create a link on my vue app to local pdf files. Right now here's my problem.

My pdfs are located in assets/static/ and presently linking to them like this.

<template>
  <div id="forms" class="view-wrapper">
      <h3>Downloadable Forms</h3>
      <a href="../assets/static/Direct Deposit Form.pdf">Claim Form</a>
  </div>
</template>

This brings up a link on the page, but when I click it, I'm taken to a blank page on my app with just the navbar and footer and nothing in between. I'm hoping to have it bring up the document in the browsers pdf viewer in another tab. Some help would be greatly appreciated.

Edit: SOLVED: @dan helped me realize that I just had to use one dot to access my assets folder.

If you want to serve files from the server, you should put them in `public` instead of `src/assets`, which is for bundling files in the client. https://stackoverflow.com/questions/52082968/vue-js-2-vue-cannot-find-files-from-assets-folder-v-for/52083292#52083292 — Dan, Feb 21 '20 at 04:30
I tried moving a file into public, and then linking to it with an tag, and it's still just opening a blank page with just my header and footer. — Eli Hermann, Feb 21 '20 at 18:42
Once it's in `public > assets > static`, you can do this: `Claim Form` Use one dot, not two. — Dan, Feb 21 '20 at 19:27

score 0 · Answer 1 · answered Feb 21 '20 at 02:46

0

To render a pdf in the browser use an <iframe src="path-to-pdf" />. Unless you're binding reactive data to the element you don't have to do anything different in vue. Check out https://stackoverflow.com/a/52644970/6890774 this is a similar issue.

answered Feb 21 '20 at 02:46

caseyjoneal

208
1
5

Thank you, but I am actually trying to bring up the pdf in a new tab. I'm copying a static site that uses Click, and brings up the pdf in the browsers pdf viewer in another tab. Any ideas for that? – Eli Hermann Feb 21 '20 at 18:40
Got it. Why don't you link to a new page using `target="_blank"` and then on that page have the iframe there with the rendered pdf. Also, check out this thread theres several ways to accomplish rendering a pdf in the browser. – caseyjoneal Feb 22 '20 at 03:55

How do I link to a pdf in vue?

1 Answers1