Warm tip: This article is reproduced from serverfault.com, please click
javascript vue-component vue.js vuetify.js vue-cli

Vue download file from link href and Vuetify v-btn

发布于 2020-11-28 08:10:00

I'm new to Vue.js, and I'm struggling with this simple thing.

I'd like to place a Vuetify button on my page and point it to a file, that the user can download. The href part is where nothing works for me. The file to download is placed in the /assets folder.

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

All it does when I click on the button is point me to a new url which is not displaying anything:

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

Same result if I place my file to the /public directory.

Thanks for any help

Questioner
Dusan
Viewed
0
分享
Dan 2020-11-28 21:28:13

It should work when you place the file in public. Anything in public will be in the root directory at runtime. Change the href attribute to:

href="file.pdf"

You can also remove the target attribute and use the download attribute to force a download:

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

With a v-btn it's the same idea:

<v-btn 
   class="ma-2" 
   outlined 
   href="file.pdf"
   download>
       Download PDF
</v-btn>
RTF 2021-03-23 10:41:50

Note that no version of Internet Explorer supports the download attribute.

热门帖子

1
为什么我的 TG 始终收不到提醒通知？
2
Android 开发方向：传统 View 开发 or 拥抱 Jetpack Compose
3
浙江 ISP 会屏蔽 Wireguard UDP 端口
4
高级 Java 岗位一定需要有管理经验吗
5
兄弟们，老是倒在大厂二面的怎么办？
6
最近很多小伙伴弄港卡，分享一下个人开卡经历
7
vercel 免费版 3 个指标都超了，好像我的网站已经获得了基础流量。还好套了 cloudflare 不然流量也超了。
8
最近换了真我手机，发现这系统连应用的数据都无法备份
9
MacBook Pro 决赛圈
10
连下厨房也要放弃网页版了

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections.
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models.
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc.
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System
8
lightweight, standalone C++ inference engine for Google's Gemma models.
9
📚 Freely available programming books
10
A collective list of free APIs
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
12
🎓 Path to a free self-taught education in Computer Science!
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.