当前位置：首页 > VUE

vue实现点击下载

2026-01-08 06:34:53VUE

使用 `<a>` 标签实现下载

在 Vue 中可以通过动态生成 <a> 标签实现文件下载。适用于已知文件 URL 的场景。

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a')
      link.href = 'https://example.com/file.pdf' // 文件URL
      link.download = 'filename.pdf' // 下载文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

使用 Blob 对象下载动态内容

当需要下载动态生成的内容（如 API 返回的数据）时，可以使用 Blob 对象。

<template>
  <button @click="downloadDynamicContent">下载动态内容</button>
</template>

<script>
export default {
  methods: {
    async downloadDynamicContent() {
      const response = await fetch('https://api.example.com/data')
      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)

      const link = document.createElement('a')
      link.href = url
      link.download = 'data.json'
      document.body.appendChild(link)
      link.click()

      window.URL.revokeObjectURL(url)
      document.body.removeChild(link)
    }
  }
}
</script>

使用 FileSaver.js 库简化操作

FileSaver.js 是一个流行的文件保存库，可以简化下载操作。

安装依赖：

npm install file-saver

使用示例：

<template>
  <button @click="downloadWithFileSaver">使用FileSaver下载</button>
</template>

<script>
import { saveAs } from 'file-saver'

export default {
  methods: {
    downloadWithFileSaver() {
      const content = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' })
      saveAs(content, 'hello.txt')
    }
  }
}
</script>

处理大文件下载进度

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

<template>
  <button @click="downloadLargeFile">下载大文件</button>
  <div v-if="progress > 0">下载进度: {{progress}}%</div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    async downloadLargeFile() {
      const response = await fetch('https://example.com/large-file.zip')
      const reader = response.body.getReader()
      const contentLength = +response.headers.get('Content-Length')
      let receivedLength = 0
      let chunks = []

      while(true) {
        const { done, value } = await reader.read()
        if(done) break

        chunks.push(value)
        receivedLength += value.length
        this.progress = Math.round((receivedLength / contentLength) * 100)
      }

      const blob = new Blob(chunks)
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = 'large-file.zip'
      document.body.appendChild(link)
      link.click()
      window.URL.revokeObjectURL(url)
      document.body.removeChild(link)
    }
  }
}
</script>

处理跨域下载问题

当下载跨域资源时，可能需要服务器配置 CORS 或使用代理。

// 使用代理示例
downloadCrossOriginFile() {
  const proxyUrl = '/api/proxy?url=' + encodeURIComponent('https://external.com/file.pdf')
  const link = document.createElement('a')
  link.href = proxyUrl
  link.download = 'file.pdf'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}