Vue 下载图片功能

downloadImage() {
      const imageUrl = this.imageUrl;
      const xhr = new XMLHttpRequest();
      xhr.open("GET", imageUrl, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (xhr.status === 200) {
          const url = window.URL.createObjectURL(xhr.response);
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "image.png");
          document.body.appendChild(link);
          link.click();
        } else {
          console.error("图片下载失败");
        }
      };
      xhr.send();
    },

<el-button @click="downloadImage()" type="primary">下载图片</el-button>

data(){
    return{
    imageUrl: "", // 图片URL，默认为空       
 }
}

这是一个关于图片下载的功能，

1. 将当前的this.imageUrl赋值给一个局部变量imageUrl，以确保代码在加载完后imageUrl的值不会改变。

2. 创建一个XMLHttpRequest对象，并通过GET请求获取imageUrl的图片数据。

3. 将响应类型设置为"blob"，以便将响应数据转换为blob对象。

4. 在xhr.onload回调函数中，首先检查xhr的状态码是否为200，表示请求成功。如果成功，将blob数据转换为URL链接，创建一个a标签，并设置下载属性和文件名。

5. 将a标签添加到文档的body中。

6. 调用link.click()模拟点击a标签，从而触发下载。

7. 如果xhr的状态码不是200，表示请求失败，打印错误信息。