当前位置：首页 > VUE

vue 实现下载图片

2026-01-20 15:36:07VUE

使用 `a` 标签下载图片

在 Vue 中可以通过动态创建 a 标签并设置 download 属性实现图片下载。
获取图片 URL 后，创建一个隐藏的 a 标签，模拟点击触发下载。

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

<script>
export default {
  methods: {
    downloadImage() {
      const imageUrl = 'https://example.com/image.jpg';
      const link = document.createElement('a');
      link.href = imageUrl;
      link.download = 'image.jpg'; // 设置下载文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>

使用 `axios` 下载二进制图片

如果图片需要鉴权或返回二进制数据，可以通过 axios 请求获取 blob 数据，再转换为下载链接。

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadImage() {
      try {
        const response = await axios.get('https://example.com/image.jpg', {
          responseType: 'blob'
        });
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.download = 'image.jpg';
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

使用第三方库 `file-saver`

通过 file-saver 库简化 Blob 数据的下载流程，适用于需要兼容性处理的场景。

npm install file-saver

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

export default {
  methods: {
    async downloadImage() {
      const response = await axios.get('https://example.com/image.jpg', {
        responseType: 'blob'
      });
      saveAs(response.data, 'image.jpg');
    }
  }
};
</script>

处理跨域问题

如果图片资源存在跨域限制，需确保服务器配置 CORS 头部（如 Access-Control-Allow-Origin），或通过后端代理转发请求。

动态生成下载文件名

通过解析 URL 或响应头获取文件名，提升用户体验。

const fileName = imageUrl.split('/').pop(); // 从URL提取文件名
// 或从响应头获取
const contentDisposition = response.headers['content-disposition'];
const fileName = contentDisposition.split('filename=')[1];