下载文件.md

下载文件

使用 download 属性

将 download 属性添加到链接上将强制浏览器下载文件，而不是导航到链接。但需要注意，IE 11 不支持 download 属性。

<a href="/path/to/file" download>下载文件</a>

推荐：使用 HTML5 download 属性创建可下载的链接

触发 click 事件

这个想法来自于创建一个链接，并触发它的 click 事件。

// 创建一个新链接
const link = document.createElement('a')
link.download = 'file name'
link.href = '/path/to/file'

// 添加到文档中
document.body.appendChild(link)

// 触发点击事件
link.click()

// 移除元素
document.body.removeChild(link)

下载生成数据的文件

下载带有动态数据的文件是很常见的。例如：

• 一个 JSON
• 一段文字
• 一个图像

我们可以将数据转换为 blob，然后触发上述提到的 click 事件。以下示例代码创建一个 JSON blob 并下载它：

const data = JSON.stringify({ message: 'Hello world' })
const blob = new Blob([data], { type: 'application/json' })

// 创建新的 URL
const url = URL.createObjectURL(blob)

// 创建链接并触发下载
// ...

// 释放上面创建的 URL
URL.revokeObjectURL(url)

推荐：URL 对象

下载库

你也可以使用一些成熟的库来帮助你减少这些操作，库的内部也帮我们解决了一些常见的兼容性问题等。例如：

• js-file-download
• FileSaver.js

使用起来很简单，源码也很少，感兴趣的可以自行查阅。

更多资料

聊一聊 15.5K 的 FileSaver，是如何工作的？