Vueはクリックしてローカルに写真をダウンロードすることを実現

html：code

<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();
      });
    },

注意：ここに穴があります。画像がバックグラウンドでリクエストされた場合、タグのhrefがIPアドレスの場合、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