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

【问题标题】：Vue download file from link href and Vuetify v-btn从链接 href 和 Vuetify v-btn 下载 Vue 文件
【发布时间】：2021-03-10 20:17:08
【问题描述】：

我是 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 目录，结果相同。

感谢您的帮助

【问题讨论】：

【解决方案1】：

当您将文件放在 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>

【讨论】：