vue 下载后台返回的图片

HTML:

//businessLicenceFileList[0].url为后台返回的图片地址或pdf地址
<div class="download-img" @click="downloadQr(businessLicenceFileList[0].url,1)">图片或pdf下载</div>

JS:

  // 判断是否为图片
    testImg(img) {
      return /\.(png|jpg|gif|jpeg|webp)$/.test(img);
    },  
 downloadQr(imgUrl, num) {
      if (this.testImg(imgUrl)) {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        const img = new Image();
        img.src = imgUrl + "?t=1";
        img.crossOrigin = "*";
        img.onload = () => {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0, img.width, img.height);
          let url = canvas.toDataURL();
          let alink = document.createElement("a");
          alink.style = "display: none;";
          document.documentElement.appendChild(alink);
           alink.setAttribute("download", `下载.png`);
          alink.setAttribute("href", url);
          alink.click();
          document.documentElement.removeChild(alink);
        };
      } else {
        window.open(imgUrl);//pdf下载
      }
    },