浏览器下载文件和图片

发布时间 2023-05-31 09:16:58作者: Deer-Mr
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) 来下载文件 和图片