Vue 从 link href 和 Vuetify v-btn 下载文件

Question

我是 Vue.js 的新手，我正在为这个简单的事情而苦苦挣扎。

我想在我的页面上放置一个 Vuetify 按钮并将其指向一个用户可以下载的文件。 href 部分对我不起作用。要下载的文件位于 /assets 文件夹中。

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

当我点击按钮时，它所做的只是指向一个新的 url，它没有显示任何内容：

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

如果我将我的文件放在 /public 目录中，结果相同。

感谢您的帮助

Answer 1

当您将文件放在 public 中时它应该可以工作。 public 中的任何内容在运行时都将位于根目录中。将 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>

Vue download file from link href and Vuetify v-btn