HTML5 中 a 标签支持一个叫 download 属性，这个属性标识了这个 a 标签的行为时下载文件，而不是跳转。

浏览器兼容性

download 属性兼容性

如 CANIUSE 的数据所示，IE 浏览器都不支持这一特性，Edge 从 13 版本开始支持，Safari 从 10.1 版本开始支持。Firefox 只允许下载同源的文件。

快速使用

1
2
3
<a download="data.txt" href="data:text/txt;charset=utf-8,内容lalallaala">
  下载 TXT
</a>

通过以上代码可以将文字以 text/txt 格式，下载为名为 data.txt 的文件。

下载为 JSON、CSV、TSV 格式

JSON、CSV 与 TSV 格式是表格数据导出下载的常用格式，在实际开发中会经常遇到。

JSON 格式

JSON 格式的下载与 txt 下载类似，将 a 标签的 href 开头设置成 data:text/csv;charset=utf-8, ，拼接上数据的 JSON.stringify 的值即可。

1
2
3
<a download="data.json" href="data:application/json;charset=utf-8,{index:10}">
  下载 JSON
</a>

CSV 与 TSV 格式

CSV、TSV 格式首先需要借助 ricardobeat/TSV 这个库将数据对象转换为 CSV、TSV 格式的字符串，其他步骤与 txt 和 JSON 格式的下载都类似。有一点需要特殊注意，如果内容包含中文字符，需要在 data:text/csv;charset=utf-8, 后面加上 \ufeff，否则会造成中文乱码。

1
2
3
4
5
6
<a
  download="data.json"
  href="data:application/json;charset=utf-8,\ufeff一些内容"
>
  下载 CSV
</a>

完整示例

See the Pen Download js object as JSON, CSV, TSV by mixj93 (@mixj93) on CodePen.

参考