一、点击视频下载（通过视频url实现）；二、点击下载视频按钮，视频以压缩包形式下载（但未实现压缩视频）

一、点击视频下载（通过视频url实现）

<div class="video-list" v-for="(item,index) in videoList" :key="index">
          <span class="video-title" >{{item.title}}</span>
          <span class="video-content" >{{item.content}}</span>
          <div class="video-show" >
            <video
                @click="choseDownload(item.url)"
                muted="muted"
                preload="load"
                autoplay="autoplay"
                loop="loop"
                webkit-playsinline
                playsinline
                x5-video-player-type="h5"
                class="efficient-video"
                style="cursor: pointer;"
            >
              <source :src="item.url" type="video/mp4">
            </video>
          </div>
        </div>

  created() {
    this.videoListSelect();
  },
// 视频管理分页查询
    videoListSelect(){
      let data = {
        type:2,//查视频管理的所有数据
        fileType:'v',//v:视频
        pageNum: 1,
        pageSize: 8,
      };
      let url = '/ArDownLoad/getAllDownLoad';
      this.$request.post(url, data).then(data =>{
        this.videoList = data.obj.list;
        console.log("this.videoList-------", this.videoList)

      })
    },
//视频点击时的下载事件
    choseDownload(url) {
      fetch(url)
          .then(res => res.blob())
          .then(blob => {
            const a = document.createElement('a')
            const objectUrl = window.URL.createObjectURL(blob)
            a.download = name
            a.href = objectUrl
            a.click()
            window.URL.revokeObjectURL(objectUrl)
            a.remove()
          })
    },

二、点击下载视频按钮，视频以压缩包形式下载（但未实现压缩视频）
直接下载视频文件，并将其以ZIP格式保存

<div class="video-list" v-for="(item,index) in videoList" :key="index">
          <span class="video-title" >{{item.title}}</span>
          <span class="video-content" >{{item.content}}</span>
          <div class="video-button"><el-button @click="choseDownload(item.url)" color="#73767a"><el-icon style="margin: 0 4px 0 0"><Download /></el-icon>下载</el-button></div>
          <div class="video-show" >
            <video
                muted="muted"
                preload="load"
                autoplay="autoplay"
                loop="loop"
                webkit-playsinline
                playsinline
                x5-video-player-type="h5"
                class="efficient-video"
                style="cursor: pointer;"
            >
              <source :src="item.url" type="video/mp4">
            </video>
          </div>
        </div>

choseDownload(videoUrl) {
      // 创建JSZip实例
      const zip = new JSZip();

      // 发起请求获取视频文件的Blob数据
      this.getVideoBlob(videoUrl).then(blob => {
        // 将视频文件添加到ZIP中，假设视频文件名为'video.mp4'
        zip.file('video.mp4', blob, { binary: true });

        // 生成ZIP文件的Blob数据
        zip.generateAsync({ type: 'blob' }).then(content => {
          // 使用file-saver保存ZIP文件
          saveAs(content, 'video.zip');
          // 提示用户下载完成
          this.$message.success('视频压缩包下载完成');
        }).catch(error => {
          // 压缩或保存失败时的处理
          this.$message.error('视频压缩包下载失败');
        });
      }).catch(error => {
        // 获取视频Blob数据失败时的处理
        this.$message.error('获取视频文件失败');
      });
    },

    // 获取视频文件的Blob数据
    getVideoBlob(url) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';

        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          } else {
            reject(new Error(`请求视频文件失败: ${xhr.status}`));
          }
        };

        xhr.onerror = () => {
          reject(new Error('网络错误'));
        };

        xhr.send();
      });
    },