JS实现图片下载

HTML <a> download 属性

在 HTML5 中，download 属性是 <a> 标签的新属性，它规定被下载的超链接目标。该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

在 <a> 标签中必须设置 href 属性。

Blob下载

示例代码

const imgUrlStr = 'https://weiliicimg9.pstatp.com/weili/l/905526294583705654.jpg';
        
fetch(imgUrlStr)
  .then(res => res.blob().then(blob => {
  const a = document.createElement('a'),	// 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
        url = window.URL.createObjectURL(blob),
        filename = 'testPicture';

  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
}));

技术点说明

window.URL

window.URL 有两个方