跳到主要内容

使用a标签的download属性实现导出下载

· 阅读需 2 分钟

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

浏览器兼容性

download 属性兼容性

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>

完整示例

Codepen

参考