8

I just wants to add a link to download a pdf file in nuxt project.

How do I do that?

I have tried the following:

<a :href="require('@/static/documents/WTSDL2019_Pamplet.pdf')" download class="btn btn-sm btn-sub-color" >Download</a>

which works well for images but not for pdf files. I found vue-pdf but I feel its an extra work for the purpose of just linking a pdf file. I have no work view a pdf files with all those events.

David
  • 524
  • 1
  • 7
  • 24

4 Answers4

12

I had the same problem and this worked for me. I added the file in the static folder and it worked.

  • static

    • WTSDL2019_Pamplet.pdf
<a href="/WTSDL2019_Pamplet.pdf" download="">Download</a>
Mohamed Ayman
  • 146
  • 2
  • 6
  • Please add some explanation to your answer such that others can learn from it. For example, why are there multiple backticks in that `a` tag? – Nico Haase May 22 '20 at 07:47
  • Don't know why the downvote, people should read the answer and understand it, it doesn't need much explanation. PS: add a slash to the href="/WTSDL2019_Pamplet.pdf" – Andres Felipe Jun 04 '20 at 15:33
3

This works:

<a href="/cv.pdf">Download my CV</a>

if you put the PDF in the static folder. You don't need the /static/ as NUXT does the magic.

Gabriel
  • 111
  • 1
  • 1
  • 12
0
<a :href="require('../assets/documents/WTSDL2019_Pamplet.pdf')" download>
Download
</a>
Ibrahim Mohammed
  • 302
  • 5
  • 17
  • 8
    Code only answers can almost always be improved by adding some explanation of how and why they work. – Jason Aller May 22 '20 at 02:27
  • it's nothing major to explain, he just needs to replace the `@` with `../` but i don't recommend this method since it will actually load the file to the compiler when you run npm run dev and make your project slow, i uploaded my files to the server and just used the link from my storage server – Ibrahim Mohammed May 23 '20 at 03:03
0

In my scenario, when I put file (1111.pdf) in sub-folder of static; like this static/pdf/1111.pdf , It doesn't response anything. But when I change to this 1111.pdf file to just under static folder, It works. This is my code:

<a href="../../1111.pdf" download="" target="_blank" >Download</a>
Aung Myo Khant
  • 1
  • 1
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31045285) – mbuechmann Feb 16 '22 at 11:13