当前位置：首页 > VUE

vue实现歌曲下载功能

2026-01-23 12:33:24VUE

实现歌曲下载功能的方法

在Vue中实现歌曲下载功能通常涉及前端和后端的配合。以下是几种常见的实现方式：

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

当歌曲文件是公开可访问的URL时，可以直接在前端实现下载：

vue实现歌曲下载功能

downloadSong(url, filename) {
  const link = document.createElement('a')
  link.href = url
  link.download = filename || 'song.mp3'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

通过API接口下载（需要后端支持）

大多数情况下需要后端提供下载接口：

vue实现歌曲下载功能

axios({
  url: '/api/download',
  method: 'GET',
  params: { songId: 123 },
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]))
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', 'song.mp3')
  document.body.appendChild(link)
  link.click()
})

显示下载进度

对于大文件下载，可以显示进度条：

axios({
  url: '/api/download',
  method: 'GET',
  params: { songId: 123 },
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    this.downloadProgress = percentCompleted
  }
}).then(response => {
  // 处理下载完成逻辑
})

处理浏览器兼容性

某些浏览器可能需要特殊处理：

if (window.navigator.msSaveOrOpenBlob) {
  // IE专用方法
  window.navigator.msSaveOrOpenBlob(new Blob([response.data]), 'song.mp3')
} else {
  // 标准方法
  const url = window.URL.createObjectURL(new Blob([response.data]))
  const link = document.createElement('a')
  link.href = url
  link.download = 'song.mp3'
  document.body.appendChild(link)
  link.click()
  setTimeout(() => {
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
  }, 100)
}

注意事项

确保有合法的版权授权才能实现歌曲下载功能
大文件下载建议使用分块传输
考虑添加下载权限验证
移动端可能需要特殊处理
服务器应设置正确的Content-Disposition头部

后端实现示例（Node.js）

router.get('/download', (req, res) => {
  const songId = req.query.songId
  const filePath = path.join(__dirname, 'songs', `${songId}.mp3`)

  res.download(filePath, err => {
    if (err) {
      res.status(404).send('File not found')
    }
  })
})

以上方法可以根据实际项目需求进行组合和调整。