vue 下载后台返回的图片

原创已于 2022-11-15 10:05:36 修改 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2022-06-30 18:25:00 首次发布

经验分享同时被 2 个专栏收录

149 篇文章

订阅专栏

vue

136 篇文章

订阅专栏

该博客介绍了如何使用HTML和JavaScript实现从后台获取的图片或PDF地址进行下载。通过创建canvas元素，将图片绘制到canvas上并转换为dataURL实现图片下载，对于PDF则直接通过window.open打开链接下载。这段代码涉及前端开发中的图片处理和文件下载技术。

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下载
      }
    },