当前位置：首页 > VUE

vue实现视频下载

2026-03-29 23:11:26VUE

实现视频下载功能

在Vue中实现视频下载功能可以通过前端直接处理或结合后端服务完成。以下是两种常见方法的详细说明：

前端直接下载（适用于公开URL）

若视频文件已托管在服务器且可通过公开URL访问，可直接通过<a>标签触发下载：

<template>
  <button @click="downloadVideo">下载视频</button>
</template>

<script>
export default {
  methods: {
    downloadVideo() {
      const videoUrl = 'https://example.com/video.mp4';
      const link = document.createElement('a');
      link.href = videoUrl;
      link.download = 'video.mp4'; // 指定下载文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>

注意事项：

需确保服务器允许跨域资源共享（CORS）。
部分浏览器可能因安全策略限制自动下载。

结合后端服务下载

若视频需要鉴权或处理后再下载，需通过后端API实现：

前端请求接口：

axios.get('/api/download-video', {
responseType: 'blob', // 重要：声明响应类型为二进制流
params: { videoId: '123' }
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.download = 'video.mp4';
link.click();
window.URL.revokeObjectURL(url); // 释放内存
});

后端示例（Node.js）：

app.get('/api/download-video', (req, res) => {
const filePath = '/path/to/video.mp4';
res.download(filePath); // Express提供的便捷方法
});

处理大文件分片下载

针对大文件，可实现分片下载以提升用户体验：

vue实现视频下载

async function downloadLargeFile() {
  const CHUNK_SIZE = 1024 * 1024; // 1MB分片
  let offset = 0;
  let chunks = [];

  while (true) {
    const response = await fetch('/api/video', {
      headers: { Range: `bytes=${offset}-${offset + CHUNK_SIZE}` }
    });
    if (!response.ok) break;
    chunks.push(await response.blob());
    offset += CHUNK_SIZE;
  }

  const fullBlob = new Blob(chunks);
  const downloadUrl = URL.createObjectURL(fullBlob);
  // 创建下载链接逻辑同上
}