Blob是前端生成下载文件最常用可靠方式，支持文本、JSON、CSV及图片PDF等，核心三步：构造Blob→createObjectURL→模拟a.click下载并及时revoke释放内存。
在前端用 JavaScript 生成并下载文件，Blob 是最常用、最可靠的方式。它不依赖后端接口，适合导出文本、JSON、CSV、甚至动态生成的图片或 PDF（配合对应库）。
创建 Blob 并触发下载
Blob 表示不可变的原始数据对象。要下载，需结合 URL.createObjectURL() 创建临时 URL，再用 <a> 标签模拟点击：
- 准备内容（字符串、数组、ArrayBuffer 等），指定 MIME 类型（如
"text/plain"、"application/json"、"text/csv"） - 用
new Blob([content], { type: mimeType })构造 Blob - 调用
URL.createObjectURL(blob)获取可访问的临时地址 - 创建隐藏的
<a>元素，设置href和download属性（后者决定下载的文件名） - 调用
a.click()触发下载，最后用URL.revokeObjectURL()释放内存
示例：下载一个简单的 JSON 文件
const data = { name: "张三", score: 95 };
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "info.json";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放，避免内存泄漏
下载 CSV 文件（常见场景）
CSV 本质是逗号分隔的纯文本，注意处理字段中的换行、引号和逗号 —— 简单数据可直接拼接，复杂内容建议用转义逻辑或专用库（如 Papa Parse）。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 每行用
\n分隔，字段用英文双引号包裹（如有逗号/换行） - MIME 类型设为
"text/csv;charset=utf-8"，并添加 BOM 头（\uFEFF）防止 Excel 打开乱码 - 文件名推荐以
.csv结尾
示例：导出用户列表
const rows = [
["姓名", "城市", "备注"],
["李四", "上海", "开发"],
["王五", "深圳", "测试"]
];
const csvContent = "\uFEFF" + rows.map(row => row.map(field => `"${field}"`).join(",")).join("\n");
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = Object.assign(document.createElement("a"), {
href: url,
download: "users.csv"
});
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
处理二进制数据（如 Canvas 导出图片）
Canvas 的 toBlob() 方法直接返回 Blob，无需手动构造：
- 调用
canvas.toBlob(callback, type, quality)（异步） - 在回调中拿到 Blob，再走标准下载流程
- 支持
"image/png"（默认）、"image/jpeg"等类型；JPEG 可传 0.1–1 的质量参数
示例：
const canvas = document.getElementById("myCanvas");
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "chart.png";
a.click();
URL.revokeObjectURL(url);
}, "image/png");
注意事项与兼容性
Blob 在所有现代浏览器中均支持（包括 IE10+），但部分细节需留意：
-
download属性在 Firefox 中对跨域 URL 无效；确保href是同源或 Blob URL - 移动端 Safari 对自动
click()有限制，必须由用户手势（如onclick）触发下载逻辑 - 大文件（如上百 MB）可能触发内存压力，建议分块处理或提示用户；长期运行页面应主动
revokeObjectURL - 若需流式下载或断点续传，Blob 不适用，应改用
fetch + ReadableStream或服务端配合
不复杂但容易忽略。核心就三步：构造 Blob → 创建 URL → 模拟点击下载，并记得清理。
