HTML5 中 a
标签支持一个叫 download
属性,这个属性标识了这个 a
标签的行为时下载文件,而不是跳转。
浏览器兼容性
如 Can I use 的数据所示,IE 浏览器都不支持这一特性,Edge 从 13 版本开始支持,Safari 从 10.1 版本开始支持。Firefox 只允许下载同源的文件。
快速使用
<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
的值即可。
<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
,否则会造成中文乱码。
<a
download="data.json"
href="data:application/json;charset=utf-8,\ufeff一些内容"
>
下载 CSV
</a>