JavaScript 中怎么使用 Blob 对象在前端生成并下载文件-js教程-PHP中文网

blob是前端生成下载文件最常用可靠方式，支持文本、json、csv及图片pdf等，核心三步：构造blob→createobjecturl→模拟a.click下载并及时revoke释放内存。

javascript 中怎么使用 blob 对象在前端生成并下载文件

在前端用 JavaScript 生成并下载文件，Blob 是最常用、最可靠的方式。它不依赖后端接口，适合导出文本、JSON、CSV、甚至动态生成的图片或 PDF（配合对应库）。

创建 Blob 并触发下载

Blob 表示不可变的原始数据对象。要下载，需结合 URL.createObjectURL() 创建临时 URL，再用 <a></a> 标签模拟点击：

准备内容（字符串、数组、ArrayBuffer 等），指定 MIME 类型（如 "text/plain"、"application/json"、"text/csv"）
用 new Blob([content], { type: mimeType }) 构造 Blob
调用 URL.createObjectURL(blob) 获取可访问的临时地址
创建隐藏的 <a></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）。

每行用 \n 分隔，字段用英文双引号包裹（如有逗号/换行）
MIME 类型设为 "text/csv;charset=utf-8"，并添加 BOM 头（\uFEFF）防止 Excel 打开乱码
文件名推荐以 .csv 结尾

示例：导出用户列表

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

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");