vue 下载图片到本地

在Vue.js中下载图片到本地，通常可以使用`<a>`标签配合`download`属性，或者是使用JavaScript的FileSaver库。以下是两种常见的做法：

1. 使用HTML直接下载：

<a :href="imageUrl" @click.prevent="downloadImage">点击下载</a>

<script>
export default {
  methods: {
    downloadImage() {
      const link = document.createElement('a');
      link.href = this.imageUrl;
      link.download = 'image filename'; // 替换为你要保存的文件名
      link.click();
      document.body.removeChild(link); // 防止内存泄漏
    },
  },
};
</script>

在这个例子中，`imageUrl`应该是你的图片URL。

2. 使用FileSaver库（适用于需要处理异步或复杂场景）：
首先，在项目中安装FileSaver库：

npm install file-saver

然后在组件中导入并使用：

import FileSaver from 'file-saver';

methods: {
  async downloadImage(url) {
    const response = await axios.get(url);
    const blob = new Blob([response.data], { type: 'image/jpeg' }); // 更改类型为实际图片格式
    FileSaver.saveAs(blob, 'image filename'); // 替换为你要保存的文件名
  },
}

这里假设你使用了axios获取图片数据。