download third party resource

JavaScript

在 HTML 中,如果一个 a 标签,带上了 download 的属性,链接地址就会被浏览器直接用于下载。使用方法如下:

<a href="link_here" download="filename.suffix">Link</a>

同样,如果需要 JavaScript 能够直接触发一个资源的下载,可以创建带 download 属性的 a 标签,然后调用这个元素的 click 方法。

const a = document.createDocument('a');
a.href = 'link_here';
a.download = 'filename';
document.body.appendChild(a);
a.click(); // trigger download
document.body.removeChild(a);

download 的支持情况见这里

这个方案有一个问题:如果是跨域的资源,直接这样的 a 标签点击是不能调用下载的(因为执行了严格的同源策略),行为上就会和一个普通的导航没有区别(比如,增加 target=_blank 之后就会打开一个新窗口展示资源)。

解决跨域的一个前端方案是:fetch 资源,然后将结果转化成 Blob,然后将这个 Blob 生成一个 URL。代码如下:

fetch('link_here')
  .then(repsonse => response.blob())
  .then(blob => URL.createObjectURL(blob))
  .then((link) => {
    const a = document.createElement('a');
    a.href = link;
    a.download = 'filename.here';
    document.body.appendChild();
    a.click();
    document.body.removeChild();
  });