当前位置：首页 > VUE

vue实现下载图片

2026-01-20 00:09:19VUE

使用 `a` 标签下载图片

在 Vue 中可以通过动态创建 a 标签实现图片下载。获取图片的 URL 后，设置 a 标签的 href 和 download 属性，触发点击事件。

<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>

使用 `fetch` 和 `Blob` 处理跨域图片

如果图片存在跨域问题，可以通过 fetch 获取图片数据，转换为 Blob 对象后再下载。

<template>
  <button @click="downloadImageWithFetch">下载跨域图片</button>
</template>

<script>
export default {
  methods: {
    async downloadImageWithFetch() {
      const imageUrl = 'https://example.com/image.jpg';
      const response = await fetch(imageUrl);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      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);
    }
  }
};
</script>

使用第三方库 `file-saver`

通过 file-saver 库可以简化下载流程，支持更复杂的文件类型处理。

安装依赖：

npm install file-saver

代码示例：

<template>
  <button @click="downloadWithFileSaver">使用file-saver下载</button>
</template>

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

export default {
  methods: {
    async downloadWithFileSaver() {
      const imageUrl = 'https://example.com/image.jpg';
      const response = await fetch(imageUrl);
      const blob = await response.blob();
      saveAs(blob, 'image.jpg');
    }
  }
};
</script>

处理 Base64 格式图片

如果图片是 Base64 格式，可以直接转换为 Blob 并下载。

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

<script>
export default {
  methods: {
    downloadBase64Image() {
      const base64Data = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABA...';
      const byteString = atob(base64Data.split(',')[1]);
      const mimeType = base64Data.split(',')[0].split(':')[1].split(';')[0];
      const ab = new ArrayBuffer(byteString.length);
      const ia = new Uint8Array(ab);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      const blob = new Blob([ab], { type: mimeType });
      const url = window.URL.createObjectURL(blob);
      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);
    }
  }
};
</script>