vue实现下载视频
使用Vue实现视频下载功能
在Vue中实现视频下载功能可以通过多种方式完成，以下是几种常见的方法：
方法一：使用a标签下载
<template>
<button @click="downloadVideo">下载视频</button>
</template>
<script>
export default {
methods: {
downloadVideo() {
const link = document.createElement('a')
link.href = '视频URL地址'
link.download = '视频文件名.mp4'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
}
</script>方法二：使用fetch API获取文件流
<template>
<button @click="downloadVideo">下载视频</button>
</template>
<script>
export default {
methods: {
async downloadVideo() {
try {
const response = await fetch('视频URL地址')
const blob = await response.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)
}
}
}
}
</script>方法三：使用axios下载
<template>
<button @click="downloadVideo">下载视频</button>
</template>
<script>
import axios from 'axios'
export default {
methods: {
async downloadVideo() {
try {
const response = await axios.get('视频URL地址', {
responseType: 'blob'
})
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)
} catch (error) {
console.error('下载失败:', error)
}
}
}
}
</script>注意事项
- 确保视频URL地址正确且可访问
- 跨域问题可能需要服务器端设置CORS
- 大文件下载可能需要显示进度条
- 某些浏览器可能对自动下载有限制
添加下载进度显示
<template>
<button @click="downloadVideo">下载视频</button>
<progress v-if="progress > 0" :value="progress" max="100"></progress>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
progress: 0
}
},
methods: {
async downloadVideo() {
try {
const response = await axios.get('视频URL地址', {
responseType: 'blob',
onDownloadProgress: (progressEvent) => {
this.progress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
}
})
// 下载完成后重置进度
this.progress = 0
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)
} catch (error) {
console.error('下载失败:', error)
}
}
}
}
</script>以上方法可以根据具体需求选择使用，第一种方法最简单，第二种和第三种方法更灵活，可以处理更复杂的情况如进度显示和错误处理。
