JavaScript 前端生成并下载文件：Blob 与模拟点击实现

JavaScript 前端生成并下载文件：Blob 与模拟点击实现

首先展示实现代码。

/**
 * 创建并下载文件
 * @param {String} fileName 文件名
 * @param {String} content 文件内容
 */
function createAndDownloadFile(fileName, content) {
 var aTag = document.createElement('a');
 var blob = new Blob([content]);
 aTag.download = fileName;
 aTag.href = URL.createObjectURL(blob);
 aTag.click();
 URL.revokeObjectURL(blob);
}

实现逻辑非常直观：直接调用封装好的方法，传入目标文件名及文件内容。程序内部会自动创建一个 a 标签元素，并实例化一个 Blob 对象。随后将文件名赋值给 a 标签的 download 属性，同时通过 URL 对象生成的链接赋值给 a 标签的 href 属性。接着触发 a 标签的点击事件以启动下载流程，最后在操作完成后回收相关内存资源。接下来详细解析具体实现细节。

Blob 对象基础

Blob 对象基础

Blob 对象代表一个不可变的、原始数据的类似文件对象。它主要包含 size 和 type 等关键属性。

该对象具备两个只读状态属性，分别为 OPEND 和 CLOSED。

Blob 对象归属于 JavaScript Web APIs 规范中的 File API 部分，具体规范细节可参考 W3C 文档中关于 The Blob Interface and Binary Data 的描述。

回到代码实现部分，这里使用了 Blob 的构造函数来创建对象：

var blob = new Blob([content]);

构造函数参数使用方括号包裹，是因为其接收的参数类型包含以下四种：

• ArrayBuffer 或 TypedArrays 类型的元素数组。
• ArrayBufferView 或 TypedArrays 类型的元素视图。
• Blob 类型的元素。
• DOMString 或 WebIDL 字符串类型的元素。

其中，ArrayBuffer 是一种用于表示通用、固定长度二进制数据的类型。如需了解更多细节，可参考 MDN 上的 ArrayBuffer 文档以及 ECMAScript2015 标准中关于 ArrayBuffer 的定义。

Blob URLs 机制

Blob URLs 机制

Blob URL 的创建与注销依赖于 URL 对象提供的方法。该 URL 对象挂载在 Window (HTML) 对象或 WorkerGlobalScope (Web Workers) 对象之下。

该对象提供了两个静态方法：createObjectURL 和 revokeObjectURL，分别用于创建指向 blob 对象的 URL 以及注销该 blob URL。

关于 Blob URL 的创建与注销规范，可查阅 W3C 标准文档。

模拟点击事件

模拟点击事件

element.click();

W3C 规范中早已包含此方法，因此无需编写繁琐的代码来模拟事件触发，直接调用即可。

应用小结

应用小结

目前该技术已应用于天猫双十一技术和 UED 庆功会的摇火箭大屏游戏中。在游戏结果排名环节，通过请求接口获取数据后，在前端直接生成文件并下载至本地，作为用户记录保存。采取此方案的主要原因是服务端暂时未提供专门的数据表来记录游戏结果，因此采用了前端生成记录的解决方案。

当时大家玩得非常开心，😁。各位的甘其食和全家卡名单正是通过这种方式生成的！