当前位置：首页 > VUE

vue 如何实现下载

2026-01-20 19:00:34VUE

实现文件下载功能

在Vue中实现文件下载可以通过以下几种方法实现，具体取决于文件来源和需求。

前端直接下载静态文件

对于存放在项目public目录或已知URL的静态文件，可以直接使用<a>标签或window.open方法。

vue 如何实现下载

<template>
  <button @click="downloadFile">下载文件</button>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a')
      link.href = '/path/to/file.pdf'
      link.download = 'filename.pdf'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

从API接口下载文件

当文件需要通过后端API获取时，可以使用axios等HTTP库处理响应。

vue 如何实现下载

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

处理大文件下载

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

axios({
  url: '/api/large-file',
  method: 'GET',
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(percentCompleted)
  }
}).then(response => {
  // 处理下载逻辑
})

下载Canvas或动态生成内容

对于需要下载Canvas绘制的内容或其他动态生成的内容。

const canvas = document.getElementById('myCanvas')
canvas.toBlob(blob => {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'canvas-image.png'
  a.click()
  URL.revokeObjectURL(url)
}, 'image/png')