前端通过后端返回 url 下载视频

407 阅读1分钟

需要注意的是,视频连接地址要和当前地址是同一地址,不然存在跨域问题是无法下载


const downloadEvent = (val : Video) => {
    var videoUrl = val.fileUrl; // 替换为你要下载的视频的URL
      var fileName =val.fileName; // 下载的文件名

      // 创建一个隐藏的a标签
      var a = document.createElement('a');
      a.style.display = 'none';
      document.body.appendChild(a);

      // 使用XMLHttpRequest下载视频
      var xhr = new XMLHttpRequest();
      xhr.open('GET', videoUrl, true);
      xhr.responseType = 'blob';

      xhr.onload = function() {
        if (xhr.status === 200) {
          // 将视频Blob对象创建一个临时URL
          var videoBlob = xhr.response;
          var url = window.URL.createObjectURL(videoBlob);

          // 设置a标签的属性,并触发点击事件进行下载
          a.href = url;
          a.download = fileName;
          a.click();

          // 释放URL对象
          window.URL.revokeObjectURL(url);
        }
      };
      xhr.send();
}