前端url下载视频资源

下载url视频有以下几种方案：

1.a标签download，但是这种因为浏览器机制会先打开预览，图片与视频都是这样。在预览页面右键下载。如果想通过a标签直接下载，可以通过设置Nginx配置。

　　

// url为资源地址
// newName为资源的原名称
// a标签的url a标签的download属性并不能修改名称，这时候我们就需要用到nginx的一个默认配置renameto达到重置名称的效果
const tepmUrl = url + '?renameto=' + newName

　　

server {
        listen 8086;
        server_name 192.168.1.66;
        location / {
            proxy_pass http://127.0.0.1:8086;
            root html;
            index index.html index.htm;
        }
        location /image/ {
            root html/devGif;
            autoindex on;
            // 主要配置
             if ($request_filename ~* ^.*?.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx|jpg|png)$){
               add_header Content-Disposition 'attachment';
            }
        //end
        }
}

　　

2.通过前端二进制文件流容器，blob对象进行操作。通过xmlHttpRequest进行访问视频url地址，得到视频数据后

　　转为二进制文件流保存在blob对象， 再通过createObjectURL创建一个包含二进制文件流额url，再通过创建

　　a标签设置下载地址，主动调用下载操作，进行视频二进制文件流下载

示例代码如下：

  function  downFile() {
      let url = 'https://xxxx.com"   
      let name = '视频资源'
      let xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.responseType = 'blob' // 返回类型blob
      // 监听进度
      xhr.onprogress = function (e) {
        if (e.lengthComputable) {
          // 文件总体积
          console.log(e.total)
          // 已下载体积
          console.log(e.loaded)
        }
      }
      xhr.onload = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          let blob = this.response
          // 转换一个blob链接
          let u = window.URL.createObjectURL(new Blob([blob]))
          let a = document.createElement('a')
          a.download = name
          a.href = u
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          a.remove()
          // 释放
          window.URL.revokeObjectURL(u)
        }
      }
      xhr.onerror = function () {
        console.log('失败')
      }
      xhr.send()
    },