indexeddb中导出blob文件的核心步骤是：先读取blob，再用url.createobjecturl()创建临时url，最后通过触发下载；需及时调用url.revokeobjecturl()释放内存，注意文件名编码、blob类型准确性及大文件处理方案。
在 IndexedDB 中存储 Blob 数据后，想把它导出为文件下载，核心思路是：先从数据库读取 Blob，再用 URL.createObjectURL() 创建临时 URL，最后通过 <a download></a> 触发浏览器下载。
1. 从 IndexedDB 读取 Blob 数据
确保你已正确打开数据库、访问 objectStore，并使用 get() 或游标获取对应 key 的 Blob 记录。Blob 通常以二进制形式原样存入（无需 base64 转换）。
示例：
const request = db.transaction('files').objectStore('files').get(fileId);
request.onsuccess = function (e) {
const blob = e.target.result?.data; // 假设 Blob 存在 data 字段中
if (blob instanceof Blob) {
triggerDownload(blob, 'report.pdf');
}
};
2. 创建可下载的临时 URL
Blob 本身不能直接被 <a href></a> 引用，必须转为浏览器可识别的 URL：
- 调用
URL.createObjectURL(blob)获取一个生命周期绑定到当前文档的临时地址 - 该 URL 仅在当前页面有效；页面关闭或显式调用
URL.revokeObjectURL()后失效 - 务必在下载完成后及时释放，避免内存泄漏
3. 触发自动下载
借助隐藏的 <a></a> 标签模拟点击：
- 设置
href为上一步生成的 blob URL - 设置
download属性指定文件名（注意：跨域 Blob 不支持 download，但 IndexedDB 本地 Blob 没这个问题） - 调用
click()触发下载 - 下载完成立即调用
URL.revokeObjectURL(url)
封装函数示例：
function triggerDownload(blob, filename) {
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); // 立即释放
}
4. 注意事项与常见问题
-
文件名编码：若 filename 含中文，部分旧版浏览器可能乱码，可用
encodeURIComponent(filename).replace(/%20/g, '+')预处理（现代浏览器通常自动处理） -
Blob 类型准确性：存入时建议同时保存
type字段（如image/png），导出时传给new Blob([data], {type})更稳妥 - 大文件表现：IndexedDB 存大 Blob（如百 MB 视频）可行，但 createObjectURL 对超大 Blob 可能卡顿；可考虑分块读取 + StreamSaver.js 等流式方案
- 兼容性：所有主流浏览器均支持 IndexedDB + Blob + createObjectURL，无需 polyfill
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
