根据地址下载文件

138 阅读1分钟

下载文件时,通过axios下载,会下载完所有文件,浏览器才会响应保存地址;
当文件较大时,等待时间较久,不利于使用
下面采取一种浏览器下载的方法,主要记录地址设置

1.测试时下载磁盘文件(D盘)

注意:/video/test.mp4是项目中public下的文件,而不是D:\videos\test.mp4
浏览器的安全策略通常不允许直接下载本地文件,以防止潜在的安全问题。

const handleDownload = () => {
  let fileName = 'test.mp4' // 下载文件的文件名
  const url = '/video/test.mp4'


  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

2.下载服务器视频时

注意:项目已经部署在服务器上

下载地址url='http://ip:port/xxx/name.mp4'

3.注意

在本地测试时,浏览器虽然能访问到服务器视频资源
如果url设置为服务器资源时,点击下载会播放视频,而不是下载
也就是在1中,url='http://ip:port/xxx/name.mp4'不会下载视频,而是播放视频