vue点击按钮下载图片

你可以使用以下方法实现在Vue中点击按钮下载图片：

1. 在data中定义一个变量来存储图片的URL：

data() {
  return {
    imgUrl: 'https://example.com/image.jpg'
  }
}

2. 在模板中添加一个按钮，并为按钮添加`click`事件处理程序：

<template>
  <div>
    <button @click="downloadImage">Download Image</button>
  </div>
</template>

3. 在`downloadImage`方法中使用`fetch` API来下载图片：

methods: {
  downloadImage() {
    fetch(this.imgUrl)
      .then(response => {
        return response.blob();
      })
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'image.jpg';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      })
      .catch(error => {
        console.log(error);
      });
  }
}

在此示例中，我们使用`fetch` API来获取图像的二进制数据，并将其转换为Blob对象。然后，我们创建一个URL对象，并将其分配给下载链接的`href`属性。然后，我们创建一个`<a>`元素，并将其添加到文档中。最后，我们触发链接的单击事件，以便用户可以下载图像。