vue2 视频下载本地，图片压缩包下载

视频单独下载

// 通过url 转为blob格式的数据(下载视频)
    getVideoArrayBuffer(url, name) {
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.responseType = 'arraybuffer' // 返回类型blob
      xhr.onload = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const blob = this.response
          console.log(blob)
          // 转换一个blob链接
          // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
          // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
          const downLoadUrl = window.URL.createObjectURL(new Blob([blob], {
            type: 'video/mp4'
          }))
          // 视频的type是video/mp4，图片是image/jpeg
          // 01.创建a标签
          const a = document.createElement('a')
          // 02.给a标签的属性download设定名称
          a.download = name
          // 03.设置下载的文件名
          a.href = downLoadUrl
          // 04.对a标签做一个隐藏处理
          a.style.display = 'none'
          // 05.向文档中添加a标签
          document.body.appendChild(a)
          // 06.启动点击事件
          a.click()
          // 07.下载完毕删除此标签
          a.remove()
        }
      }
      xhr.send()
    },

通过类型判断下载视频还是图片

// 通过url 转为blob格式的数据(下载图片)
    getImgArrayBuffer(url) {
      const _this = this
      return new Promise((resolve, reject) => {
        // 通过请求获取文件blob格式
        const xmlhttp = new XMLHttpRequest()
        xmlhttp.open('GET', url, true)
        xmlhttp.responseType = 'blob'
        xmlhttp.onload = function() {
          if (this.status == 200) {
            resolve(this.response)
          } else {
            reject(this.status)
          }
        }
        xmlhttp.send()
      })
    },
    // 多张下载
    moreLoad(type) {
      // type:1,小区视频，2，小区图
      const _this = this
      const zip = new JSZip()
      const cache = {}
      const promises = []
      const arr = type === 1 ? this.videoIds : this.chooseImgIds
      console.log(arr)
      for (const item of arr) {
        const promise = _this
          .getImgArrayBuffer(`${item.imageUrl}?t=${new Date().getTime()}`).then(data => {
            console.log(data)
            // 下载文件, 并存成ArrayBuffer对象(blob)
            if (type === 1) {
              const downLoadUrl = window.URL.createObjectURL(new Blob([data], {
                type: 'video/mp4'
              }))
              // 视频的type是video/mp4，图片是image/jpeg
              // 01.创建a标签
              const a = document.createElement('a')
              // 02.给a标签的属性download设定名称
              a.download = this.detailObj.name + '视频'
              // 03.设置下载的文件名
              a.href = downLoadUrl
              // 04.对a标签做一个隐藏处理
              a.style.display = 'none'
              // 05.向文档中添加a标签
              document.body.appendChild(a)
              // 06.启动点击事件
              a.click()
              // 07.下载完毕删除此标签
              a.remove()
            } else {
              zip.file(`img/${data.size}.jpeg`, data, {
                binary: true
              }) // 逐个添加文件
              cache[`img/${data.size}.jpeg`] = data
            }
          })
        promises.push(promise)
      }
      if (type === 2) {
        Promise.all(promises)
          .then(() => {
            zip.generateAsync({ type: 'blob' }).then(content => {
              console.log(content)
              // 生成二进制流
              FileSaver.saveAs(content, '小区图片') // 利用file-saver保存文件  自定义文件名
            })
          })
          .catch(res => {
            _this.$message.error('文件压缩失败')
          })
      }

      this.getVillageQueryDetailFun()
    },