Vue.js：前端下载静态资源文件

以下介绍不通过调用后端接口，直接在前端点击链接实现下载资源文件的方式。1.把文件放到指定静态资源目录如把文件**.exe放到public-->static下，public目录下的文件是外部可以直接访问的。2.页面添加下载标签<a :href="`${downloadUrl}/static/WebComponentsKit.exe`" target="_blank" style="col

奋斗鱼

6935人浏览 · 2021-04-21 10:18:27

奋斗鱼 · 2021-04-21 10:18:27 发布

以下介绍不通过调用后端接口，直接在前端点击链接实现下载资源文件的方式。

1.把文件放到指定静态资源目录

如把文件**.exe放到public-->static下，public目录下的文件是外部可以直接访问的。

2.页面添加下载标签

<a :href="`${downloadUrl}/static/WebComponentsKit.exe`" target="_blank" style="color: #FF0000; text-decoration: underline" >下载</a>

3.设置参数

downloadUrl的参数值为../，因为示例中当前的访问页面地址为http://localhost:9090/video_view，而通过组合../后的下载地址是http://localhost:9090//static/WebComponentsKit.exe，这个static路径是可以直接访问下载到的。

4.运行效果

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^