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