vue element 如何通过按钮或者a标签对图片地址进行下载图片

最新推荐文章于 2024-09-04 10:35:10 发布

一个不愿透露姓名的糕

最新推荐文章于 2024-09-04 10:35:10 发布

阅读量1k

点赞数

分类专栏：问题解决文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/kiritovo/article/details/125618669

版权

问题解决专栏收录该内容

11 篇文章 1 订阅

订阅专栏

vue如何下载图片

<el-button type="text" @click="exl(url)">下载图片</el-button>

//传入路径u

exl(u) {
  var img =
    u;
  const url = img;
  // window.open(_this.detail.imgUrl)
  let xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.responseType = "blob";
  xmlhttp.onload = function () {
    if (this.status == 200) {
      const blob = this.response;
      const link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      // link.download = url.substring(url.lastIndexOf("/") + 1, url.length);
      link.download =
        "图片." + url.substring(url.lastIndexOf(".") + 1, url.length);
      //此写法兼容可火狐浏览器
      document.body.appendChild(link);
      const evt = document.createEvent("MouseEvents");
      evt.initEvent("click", false, false);
      link.dispatchEvent(evt);
      window.URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
      console.log(link.download);
      console.log(link.substring);
    }
  };