如何用JavaScript实现模拟点击下载文件的功能？

本文共计715个文字，预计阅读时间需要3分钟。

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

先上代码

/** * 创建并下载文件 * @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 标签，同时将 Blob 对象作为 Url 也赋给 a 标签，模拟点击事件，自动下载成功，最后再回收内存。下面我们来看看具体是怎么操作的。

Blob 对象

Blob 对象是一个字节序列。拥有size和type等属性。

拥有 2 个只读状态OPEND和CLOSED。

Blob 对象属于 JavaScript Web APIs 中的 File API 规定的部分，可以参考 W3C 文档中的The Blob Interface and Binary Data

再回来看看我们的代码里是这么写的，使用了 Blob 的构造函数：

var blob = new Blob([content]);

使用方括号的原因是，其构造函数的参数为以下4中：

• ArrayBuffer [TypedArrays] elements.
• ArrayBufferView [TypedArrays] elements.
• Blob elements.
• DOMString [WebIDL] elements.

所谓ArrayBuffer是一种用于呈现通用、固定长度的二进制数据的类型。详情可以参考ArrayBuffer -MDN以及ECMAScript2015 标准中的 ArrayBuffer。

Blob URLs

Blob URLs 被创建或注销是使用URL对象上的方法。这个URL对象被挂在Window(HTML) 对象下，或者WorkerGlobalScope(Web Workers)对象下。

拥有以下静态方法createObjectURL和revokeObjectURL，用于创建一个 blob 对象的 url 和注销这个 blob url。

详情可查看关于创建和注销 Blob URL 的 W3C 标准文档

模拟 click

element.click();

在 W3C 中很早就有这个规范，不需要写繁琐的模拟事件触发的代码。

小结

目前我将这个技术使用在 天猫双十一技术和UED庆功会 的摇火箭大屏游戏中。最后的游戏结果排名，在请求了接口后，在前端直接生成并下载到了本地，作为记录保存。主要也是因为服务端暂时没有提供这个一张表去记录游戏结果，于是采用了前端记录的解决方案。

大家当时都玩的好开心啊，😁。你们的甘其食和全家卡的名单就是这样生成的！