第一种方法

downloadIamge(imgSrc, fileName) { // imgSrc 为图片链接路径

// 必须同源才能下载

  var alink = document.createElement("a");

  alink.href = imgSrc;

  alink.download = fileName; //fileName保存提示中用作预先填写的文件名

  alink.click();

}

第二种方法

downloadIamge:function(imgSrc, fileName) { //图片地址和图片默认名称

    let image = new Image();

    image.src = imgSrc;

    // 解决跨域 Canvas 污染问题

    image.setAttribute("crossOrigin", "Anonymous"); // 支持跨域

    image.onload = function() {

        var canvas = document.createElement("canvas");

        canvas.width = image.width;

        canvas.height = image.height;

        var context = canvas.getContext("2d");

        context.drawImage(image, 0, 0, image.width, image.height);

        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素

        var event = new MouseEvent("click"); // 创建一个单击事件

        a.download = fileName || "photo"; // 设置图片名称

        a.href = url; // 将生成的URL设置为a.href属性

        a.dispatchEvent(event); // 触发a的单击事件

      };      

},

第三种方法

downloadFile(fileUrl)  {

  const a = document.createElement('a') 

  //   let url = baseUrl + binding.value // 若是不完整的url则需要拼接baseURL

  const url = fileUrl // 完整的url则直接使用

  // 这里是将url转成blob地址，

  fetch(url)  // 跨域时会报错

    .then(res => res.blob())

    .then(blob => { // 将链接地址字符内容转变成blob地址

      a.href = URL.createObjectURL(blob) 

      console.log(a.href) 

      a.download = binding.value.name || '' // 下载文件的名字

      // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字

      document.body.appendChild(a) 

      a.click() 

      //在资源下载完成后 清除 占用的缓存资源

      window.URL.revokeObjectURL(a.href);

      document.body.removeChild(a); 

    })

}

第四种方法

function savePic(){

  var img = document.getElementById('imgId');

  var imgSrc = img.src; // 文件或图片的url地址

  savePicture(imgSrc);

}

function savePicture(url){  

    let xhr = new XMLHttpRequest();

    xhr.open('get', url, true);

    xhr.responseType = 'blob' ; //arraybuffer也可以

    xhr.ontimeout = ()=>{};

    xhr.onreadystatechange=()=>{

        if(xhr.readyState=== XMLHttpRequest.DONE) { // 4 DONE 下载操作已完成

            if(xhr.status =200) {  //status 200 代表一个成功的请求     

            };

         };

    }};

    xhr.onprogress = function () {

      console.log('LOADING', xhr.status);

    };

    xhr.onload = function () {

      console.log('DONE', xhr.status);

      let blob = xhr.response;  // response 属性返回响应的正文，取决于 responseType 属性。

      // 下载完成，创建一个a标签用于下载

      let a = document.createElement("a");

      a.download = imgSrc.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; //保存提示中用作预先填写的文件名

      a.href = URL.createObjectURL(blob) ;

      document.body.appendChild(a);

      a.click();

      // let e = document.createEvent('MouseEvents');

      // e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

      // a.dispatchEvent(e);

      // 在资源下载完成后 清除占用的缓存资源

      setTimeout(function(){

         URL.revokeObjectURL(blob);

          document.body.removeChild(a);

      }, 200)

    };

    xhr.send(null); //XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null

}

参考：

XMLHttpRequest() - Web API 接口参考 | MDN

参考地址：

• MDN a标签的说明：<a> - HTML（超文本标记语言） | MDN

• MDN 关于toDataURL 说明: HTMLCanvasElement.toDataURL() - Web API 接口参考 | MDN

js 通过 blob 类文件对象下载图片，修改图片保存的名字（兼容式写法）_时间飞逝子非鱼的博客-CSDN博客_blob 图片下载

史上最详细的经典面试题 从输入URL到看到页面发生了什么？ - 掘金