浏览器下载文件和图片

function downloadFile(url) {
  const a = document.createElement('a');
  a.href = url;
  a.download = true;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

这个函数接受一个 URL（文件的下载链接）作为参数，创建一个 标签，并设置 href 属性为要下载的文件 URL。然后将该 标签添加到页面中，并模拟用户点击下载按钮。最后从页面中移除该标签。

function downloadImage(src) {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = src;
  img.onload = function () {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.href = dataURL;
    a.download = true;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}

这个函数接受一个图片的 src（图片的地址）作为参数，创建一个  标签，并设置 crossOrigin 属性为 ‘anonymous’，用于下载跨域图片。然后监听  标签的 onload 事件，在图片加载完成后创建一个 <canvas> 标签，并获取该图片的像素数据绘制到画布上，最后使用画布导出一个 base64 格式的图片 URL，创建一个 标签并设置 href 和 download 属性，将该标签添加到页面中并模拟用户点击下载按钮。最后从页面中移除该标签。

 

尽量不要使用window.open(url) 来下载文件 和图片

使用  

npm install file-saver --save

// 保存url
saveAs("https://httpbin.org/image", "image.jpg");