Vue 下载图片功能

隔壁王先生丶

已于 2023-07-14 18:40:44 修改

阅读量756

点赞数 4

文章标签： vue.js javascript 前端

于 2023-07-14 17:28:36 首次发布

本文链接：https://blog.youkuaiyun.com/wangyadong1314/article/details/131728416

版权

该代码段展示了一个JavaScript方法downloadImage，通过XMLHttpRequest发送GET请求获取图片数据，然后将响应转换为blob，创建a标签模拟点击下载图片。当请求状态为200时，图片下载成功，否则打印错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，默认为空       
 }
}

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

将当前的this.imageUrl赋值给一个局部变量imageUrl，以确保代码在加载完后imageUrl的值不会改变。
创建一个XMLHttpRequest对象，并通过GET请求获取imageUrl的图片数据。
将响应类型设置为"blob"，以便将响应数据转换为blob对象。
在xhr.onload回调函数中，首先检查xhr的状态码是否为200，表示请求成功。如果成功，将blob数据转换为URL链接，创建一个a标签，并设置下载属性和文件名。
将a标签添加到文档的body中。
调用link.click()模拟点击a标签，从而触发下载。
如果xhr的状态码不是200，表示请求失败，打印错误信息。