vue实现下载图片

使用 <a> 标签下载图片

通过动态创建 <a> 标签并设置 download 属性实现下载。需注意跨域图片需服务端支持或使用代理。

// 方法封装
function downloadImage(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'image.jpg';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

// Vue中调用
this.downloadImage('https://example.com/image.jpg', 'my-image.jpg');

通过 Canvas 处理跨域图片

若图片跨域且无法修改服务端配置，可通过 Canvas 转换后下载。需确保图片允许跨域访问（crossOrigin 属性）。

function downloadCrossOriginImage(url, filename) {
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    canvas.toBlob((blob) => {
      const blobUrl = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = blobUrl;
      a.download = filename || 'image.png';
      a.click();
      URL.revokeObjectURL(blobUrl);
    }, 'image/png');
  };
  img.src = url;
}

使用 Axios 下载二进制图片

适用于需要添加请求头或处理鉴权的场景，通过将响应数据转为 Blob 实现下载。

import axios from 'axios';

async function downloadWithAxios(url, filename) {
  try {
    const response = await axios.get(url, {
      responseType: 'blob',
      headers: { Authorization: 'Bearer xxx' } // 可选请求头
    });
    const blobUrl = URL.createObjectURL(response.data);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = filename || 'image.jpg';
    a.click();
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('下载失败:', error);
  }
}

注意事项

• 跨域限制：直接下载跨域图片可能失败，需服务端设置 Access-Control-Allow-Origin 或使用代理。
• 文件名后缀：确保 download 属性中的文件名包含正确后缀（如 .jpg, .png）。
• Blob 内存释放：通过 URL.revokeObjectURL() 释放创建的 Blob URL 避免内存泄漏。

以上方法可根据实际场景选择，普通下载推荐第一种，复杂场景（如鉴权、跨域）推荐第三种。