当前位置：首页 > VUE

vue 实现下载图片

2026-02-21 07:27:25VUE

使用 `<a>` 标签下载图片

通过动态创建 <a> 标签并设置 download 属性实现下载。这种方式适用于已知图片 URL 且同源的情况：

<template>
  <button @click="downloadImage">下载图片</button>
</template>

<script>
export default {
  methods: {
    downloadImage() {
      const link = document.createElement('a')
      link.href = '图片URL'
      link.download = 'filename.jpg' // 设置下载文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

通过 Canvas 处理跨域图片

当图片存在跨域问题时，可以通过 Canvas 中转处理：

<script>
export default {
  methods: {
    async downloadCrossOriginImage() {
      const image = new Image()
      image.crossOrigin = 'Anonymous'
      image.src = '跨域图片URL'

      await new Promise((resolve) => {
        image.onload = resolve
      })

      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(image, 0, 0)

      canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = 'image.png'
        link.click()
        URL.revokeObjectURL(url)
      })
    }
  }
}
</script>

使用 axios 下载二进制图片数据

适用于需要通过 API 获取图片数据的场景：

<script>
import axios from 'axios'

export default {
  methods: {
    async downloadImageFromAPI() {
      try {
        const response = await axios.get('API_URL', {
          responseType: 'blob'
        })

        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'image.jpg')
        document.body.appendChild(link)
        link.click()
        link.remove()
        URL.revokeObjectURL(url)
      } catch (error) {
        console.error('下载失败:', error)
      }
    }
  }
}
</script>

处理 Base64 格式图片

当图片数据是 Base64 格式时：

<script>
export default {
  methods: {
    downloadBase64Image(base64Data, filename) {
      const link = document.createElement('a')
      link.href = base64Data
      link.download = filename
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>