当前位置：首页 > VUE

vue实现视频下载功能

2026-01-20 16:56:38VUE

使用 Blob 对象和 URL.createObjectURL 下载

在 Vue 中实现视频下载功能，可以通过将视频文件转换为 Blob 对象，并使用 URL.createObjectURL 创建下载链接。这种方法适用于从后端获取视频文件流或直接下载网络资源。

// 在 methods 中定义下载方法
downloadVideo() {
  fetch('视频URL')
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = '视频文件名.mp4'
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
      document.body.removeChild(a)
    })
    .catch(error => console.error('下载失败:', error))
}

使用 axios 下载并显示进度

如果需要显示下载进度，可以使用 axios 库。这种方式更适合需要用户交互和反馈的场景。

import axios from 'axios'

// 在 methods 中定义带进度条的下载方法
downloadVideoWithProgress() {
  axios({
    url: '视频URL',
    method: 'GET',
    responseType: 'blob',
    onDownloadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log(percentCompleted + '%')
      // 可以在这里更新UI进度条
    }
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', '视频文件.mp4')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  })
}

处理跨域问题

如果视频资源存在跨域限制，需要在服务器端设置 CORS 头或使用代理。对于前端解决方案，可以尝试以下方法：

// 使用 crossorigin 属性
const video = document.createElement('video')
video.crossOrigin = 'anonymous'
video.src = '视频URL'
video.addEventListener('loadedmetadata', () => {
  // 下载逻辑
})

分片下载大文件

对于大文件视频，可以实现分片下载以提高可靠性和用户体验：

async function downloadLargeVideo() {
  const chunkSize = 1024 * 1024 // 1MB chunks
  let startByte = 0
  let endByte = chunkSize
  const videoSize = await getVideoSize() // 需要实现获取视频大小的方法
  const chunks = []

  while (startByte < videoSize) {
    const chunk = await fetchChunk(startByte, endByte)
    chunks.push(chunk)
    startByte = endByte
    endByte = Math.min(endByte + chunkSize, videoSize)
  }

  const fullBlob = new Blob(chunks)
  const url = URL.createObjectURL(fullBlob)
  // 创建下载链接...
}

前端直接下载本地视频

如果视频已经在页面中播放，可以通过 canvas 捕获并下载：

vue实现视频下载功能

downloadLocalVideo() {
  const video = document.getElementById('videoElement')
  const canvas = document.createElement('canvas')
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  canvas.getContext('2d').drawImage(video, 0, 0)

  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'captured-video.mp4'
    a.click()
  }, 'video/mp4')
}