前端下载文件(exe,zip,js等)的几种方式

7 篇文章 0 订阅

前端一般通过创建a标签下载文件

图片:分为本地和后端传,本地直接require引入路径后创建a标签下载:

private downFun() {
    let a=document.createElement('a')
    a.style.display = 'none'
    a.setAttribute('download', 'bg.jpg')
    a.href = require('@/assets/bg.jpg')
    document.body.appendChild(a)
    console.log('href', a.href)
    a.click()
    document.body.removeChild(a)
  }

后端传的话需要调用get接口。

其它文件类型下载基本都是一样的 调用后端get接口,使用blob类型

responseType: 'blob'。进行下载

注意:如果要是本地下载一些静态资源(除图片外) 资源要放在public目录文件下,不然打包后路径你会发现很多报错,下载找不到路径。@这个不会被解析。

附下载代码:

async download(){
    console.log(this.urlName)
    let res = await axios.get(`jt/${this.urlName}`, { responseType: 'blob' })
    const url = window.URL.createObjectURL(res.data)
    const link = document.createElement('a')
    link.href = url;
    link.setAttribute('download', `${this.urlName}`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

jt/${this.urlName}

jt是public下的一个文件夹, this.urlName是你要下载的文件的名字。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现Spring Boot加载服务器端的视频文件并在前端播放,可以按照以下步骤进行操作。 1. 首先,在服务器端准备好视频文件并存放在指定的文件夹中,确保视频文件可被访问。 2. 在Spring Boot的后端代码中,创建一个Controller用于处理视频文件的加载和传输。 3. 在Controller中,使用@GetMapping或@RequestMapping注解来定义一个接口路径,用于前端请求视频文件的资源。 4. 在接口方法中,使用Java IO流或其他合适的方式读取视频文件,并将读取到的视频数据存储在一个字节数组中。 5. 通过设置HttpServletResponse的响应头,设置Content-Type为"video/mp4"或其他对应视频文件的MIME类型,以确保浏览器能正确解析视频文件。 6. 将读取到的视频数据通过HttpServletResponse的输出流返回给前端。 7. 在前端页面中,使用视频播放组件(如HTML5的video标签)来播放视频。 8. 在前端代码中,通过发起请求调用后端接口,获取视频文件的资源。 9. 将返回的视频数据绑定到视频播放组件,并设置相应的视频属性,如视频URL、自动播放等。 10. 前端页面加载完毕后,视频文件将根据设置进行自动播放或者用户手动点击播放。 总结: 通过Spring Boot的Controller将视频文件读取并返回给前端,在前端通过合适的视频播放组件进行播放,即可实现Spring Boot加载服务器端的视频文件前端播放的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值