javascript - 从链接 href 和 Vuetify v-btn 下载 Vue 文件

Question

我是 Vue.js 的新手，我正在为这个简单的事情而苦苦挣扎。
我想在我的页面上放置一个 Vuetify 按钮并将其指向一个文件，用户可以下载该文件。 href部分是对我不起作用的地方。要下载的文件放在/assets 文件夹中。

<v-btn 
   class="ma-2" 
   outlined 
   href="../assets/file.pdf" 
   target="_blank">
       Download PDF
</v-btn>

当我点击按钮时，它所做的只是将我指向一个不显示任何内容的新网址:

http://localhost:8080/assets/file.pdf

如果我将文件放到/public 目录，结果相同。
谢谢你的帮助

Answer 1

当您将文件公开放置时，它应该可以工作。任何公开的东西都将在运行时位于根目录中。更改href归因于:

href="file.pdf" 

您也可以删除 target属性并使用 download强制下载的属性:

<a href="file.pdf" download>
   Download PDF
</a>

与 v-btn这是相同的想法:

<v-btn 
   class="ma-2" 
   outlined 
   href="file.pdf"
   download>
       Download PDF
</v-btn>