vue实现下载文件和图片功能

vue实现图片或文件下载功能

今天一个需求就是实现图片下载功能，刚开始以为很简单没有什么逻辑可写，就以为调用后端接口就可以了，调用之后发现有问 题，看来还是没有想象的那么简单

1、要自己创建一个a标签，以下就是下载功能的实现

这里是调用接口之后如果code=200时进行下载

if (res.code == 200) {
    const link = document.createElement("a"); //自己创建的a标签
    link.href = res.data;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(res.data);
  }

2、还有一种情况是下载单张图片，如果用上面方法会直接跳转到了图片链接，并不会实现下载。下面则是下载单张图片的方法

getUrlBase64(imgUrl) {
      return new Promise((resolve) => {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let img = new Image(); //允许进行跨域
        img.crossOrigin = "Anonymous";
        img.src = imgUrl;
        img.onload = function() {
          canvas.height = img.height; //图片的高度
          canvas.width = img.width;//图片的宽度
          ctx.drawImage(img, 0, 0, img.width, img.height);
          let dataURL = canvas.toDataURL("image/png");
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    //点击下载图片按钮的事件
    handleDowondImg(url, name) {
      this.getUrlBase64(url).then((base64) => {
        const link = document.createElement("a");
        link.href = base64;
        link.download = this.$route.query.source;
        link.click();
      });
    },