h5页面中纯前端实现文件一键下载的核心步骤是：构造blob对象→创建临时url→通过隐藏标签触发下载。需注意编码设置、内存释放及ie/safari兼容性问题。
在 H5 页面中，利用 Blob 对象实现生成的文件（如文本、JSON、CSV、PDF 等）一键下载，核心是：**构造 Blob → 创建临时 URL → 触发 <a></a> 标签下载**。整个过程不依赖后端，纯前端完成。
1. 构造 Blob 对象
Blob 是浏览器提供的用于表示不可变原始数据的对象。你可以把字符串、数组缓冲区、File 或其他 Blob 传入其构造函数：
- 纯文本（如 JSON、CSV）：
new Blob([JSON.stringify(data)], { type: 'application/json' }) - UTF-8 中文文本需显式指定编码（避免乱码）：
new Blob(['你好'], { type: 'text/plain;charset=utf-8' }) - 二进制数据（如 canvas 导出图片）：
canvas.toBlob(callback, 'image/png')或用toDataURL()转成 base64 后再转 Blob
2. 创建并触发下载链接
用 URL.createObjectURL(blob) 生成一个指向该 Blob 的临时内存 URL，再通过隐藏的 <a></a> 标签模拟点击下载：
- 设置
a.href为 blob URL - 设置
a.download属性指定保存的文件名（注意：跨域或某些协议下可能被忽略，但同源 H5 页面基本可靠） - 调用
a.click()触发下载 - 下载完成后建议调用
URL.revokeObjectURL(url)释放内存（尤其频繁生成时）
3. 完整示例：导出 JSON 文件
（可直接复制到控制台或页面中运行）
function downloadJSON(data, filename = 'data.json') {
const blob = new Blob([JSON.stringify(data, null, 2)], {
type: 'application/json;charset=utf-8'
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 清理
}
// 使用示例
downloadJSON({ name: '张三', age: 28 }, 'user-info.json');
4. 注意事项与兼容性
-
IE10+ 支持 Blob 和
createObjectURL，但 IE 不支持a.download属性；如需兼容 IE，可用navigator.msSaveBlob()回退 - 移动端 Safari 对
download属性支持有限（iOS 13+ 有一定支持），部分场景会打开新页而非下载；可提示用户“长按链接保存”作为补充方案 - 大文件（如 >500MB）慎用，Blob 存于内存，易导致卡顿或崩溃；超大文件建议走后端流式下载
- 避免重复创建大量 blob URL 而不释放，造成内存泄漏
