vue实现点击下载图片到本地

html:代码

<div class="btnWrap" style="margin-top:30px;">
   <el-button type="success" @click="downLoad_lower">线下二维码下载</el-button>
</div>

后台请求图片地址：

// 线下二维码下载
    downLoad_lower() {
    
    
      let data = {
    
    
        type: 2,
        id: this.id
      };
      queryGoodsQRCode(data).then(res => {
    
    
        console.log(res);
        if (res.data.messageCode == "MSG_1001") {
    
    
          this.download(res.data.content);
        } else {
    
    
          this.$message.error(res.data.message);
        }
      });
    },

下载图片：

// 下载文件
    download(data) {
    
    
      if (!data) {
    
    
        return;
      }
      this.getUrlBase64(data).then(base64 => {
    
    
        let a = document.createElement("a");
        a.style.display = "none";
        a.download = this.name;
        a.href = base64;
        document.body.appendChild(a);
        a.click();
      });
    },

注意：这里有一个坑。如果你的图片是从后台请求过来的，如果你的a标签的href是IP地址的话，此时a标签的download属性会失效，a会被当成一个普通的链接使用。

解决方法1：将要下载的图片链接转换为base64格式，防止发生路由跳转

getUrlBase64(url) {
    
    
      return new Promise(resolve => {
    
    
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //允许跨域
        img.src = url;
        img.onload = function() {
    
    
          canvas.height = 300;
          canvas.width = 300;
          ctx.drawImage(img, 0, 0, 300, 300);
          let dataURL = canvas.toDataURL("image/png");
          canvas = null;
          resolve(dataURL);
        };
      });

web前端技术交流QQ群：327814892