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

html:代码

  <el-table-column
          label="签到二维码"
          align="center"
          key="signInQrCode"
          prop="signInQrCode"
        >
          <template slot-scope="scope">
            <span @click="uploadImg(scope.row.signInQrCode)">下载</span>
          </template>
  </el-table-column>

method:方法

// 下载二维码图片

uploadImg(e) {
  if (!e) {
    return this.msg.msgWarning('下载失败');
  }
  console.log(this.baseUrl + e);
  let url = this.baseUrl + e;
  this.getUrlBase64(url).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);
    };
  });
},