如何使用JavaScript实现单文件下载至本地？

本文共计851个文字，预计阅读时间需要4分钟。

最近实现了一个文件下载功能，以下简要总结其技术要点和过程：

1. 单文件下载（a标签）： - 使用HTML中的标签实现单文件下载。 - 通过设置标签的href属性为文件的URL，并添加download属性，触发文件下载。

2. 同源单文件下载： - 在同源环境下，直接通过上述方法下载文件。

3. 针对单文件下载的优化： - 利用+a标签的download属性，可以下载同源文件。 - 通过download属性，可以自定义下载文件名。

最近在做一个文件下载的功能，这里把做的过程中用的技术和坑简要总结下。

1. 单文件下载(a标签)

同源单文件

针对单文件的情况下，同源的文件，可以通过 < a> 标签的 download 属性下载文件

const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt.style.display = 'none'; document.body.appendChild(elt); elt.click(); document.body.removeChild(elt);

但是这个方案并不适用于非同源的资源，此时它相当于普通的超链接，点击会跳转到资源页面，而不是下载。