如何在Nuxt中添加下载PDF文件的链接？

Question

我想在Nuxt项目中添加一个PDF文件的下载链接。

我该怎么做？

我尝试了以下方法：

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

对于图片，这种方法很有效，但对于PDF文件则不然。我发现了vue-pdf，但我觉得只是为了链接一个PDF文件而额外工作。我没有必要使用所有这些事件来查看PDF文件。

- David

---

如果它适用于图像但不适用于PDF，那么PDF的错误是什么？ - Reynicke

你尝试过直接链接到静态文件夹吗，例如：<a href="/static/file.pdf" download>？ - Sasan Farrokh

<a style="margin-left: 10px;text-decoration: none;" :href="static/documents/WTSDL2019_Pamplet.pdf" download="">下载PDF</a>，试一下。 - Patel Pratik

Answer 1

我曾经也遇到过这个问题，这个方法适用于我。 我把文件放到静态文件夹中就可以了。

• 静态文件夹

  • WTSDL2019_Pamplet.pdf

<a href="/WTSDL2019_Pamplet.pdf" download="">Download</a>

- Mohamed Ayman

---

请在您的答案中添加一些解释，以便其他人可以从中学习。例如，为什么那个a标签中有多个反引号？ - Nico Haase

不知道为什么会被踩，人们应该阅读并理解答案，它不需要太多的解释。PS：在href="/WTSDL2019_Pamplet.pdf"中添加一个斜杠。 - Andres Felipe

Answer 2

这样做是有效的：

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

如果您把 PDF 文件放在静态文件夹中，您不需要使用 `/static/`，因为 NUXT 会自动完成此操作。

- Gabriel

Answer 3

在我的情况下，当我把文件（1111.pdf）放在 static 的子文件夹 中，例如 static/pdf/1111.pdf，它没有任何响应。但是当我把这个 1111.pdf 文件改为 直接放在 static 文件夹下面，它就可以工作了。 这是我的代码：

<a href="../../1111.pdf" download="" target="_blank" >Download</a>

- Aung Myo Khant

---

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - mbuechmann

Answer 4

<a :href="require('../assets/documents/WTSDL2019_Pamplet.pdf')" download>
Download
</a>

- Ibrahim Mohammed

---

仅仅提供代码的答案通常可以通过添加一些解释来改进，解释说明其如何以及为什么工作。 - Jason Aller

没有什么需要解释的，他只需要用../替换@即可。但我不建议使用这种方法，因为它会在运行npm run dev时将文件加载到编译器中，使您的项目变慢。我将我的文件上传到服务器上，并只使用了来自我的存储服务器的链接。 - Ibrahim Mohammed