使用 JavaScript 创建并下载文件(模拟点击)
先上代码
/** *创建并下载文件 *@param{String}fileName文件名 *@param{String}content文件内容 */ functioncreateAndDownloadFile(fileName,content){ varaTag=document.createElement('a'); varblob=newBlob([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对象属于JavaScriptWebAPIs中的FileAPI规定的部分,可以参考W3C文档中的 TheBlobInterfaceandBinaryData
再回来看看我们的代码里是这么写的,使用了Blob的构造函数:
varblob=newBlob([content]);
使用方括号的原因是,其构造函数的参数为以下4中:
- ArrayBuffer[TypedArrays]elements.
- ArrayBufferView[TypedArrays]elements.
- Blobelements.
- DOMString[WebIDL]elements.
所谓 ArrayBuffer 是一种用于呈现通用、固定长度的二进制数据的类型。详情可以参考 ArrayBuffer-MDN 以及 ECMAScript2015标准中的ArrayBuffer。
BlobURLs
BlobURLs被创建或注销是使用 URL 对象上的方法。这个 URL 对象被挂在 Window (HTML)对象下,或者 WorkerGlobalScope (WebWorkers)对象下。
拥有以下静态方法 createObjectURL 和 revokeObjectURL,用于创建一个blob对象的url和注销这个bloburl。
详情可查看 关于创建和注销BlobURL的W3C标准文档
模拟click
element.click();
在W3C中很早就有这个规范,不需要写繁琐的模拟事件触发的代码。
小结
目前我将这个技术使用在天猫双十一技术和UED庆功会的摇火箭大屏游戏中。最后的游戏结果排名,在请求了接口后,在前端直接生成并下载到了本地,作为记录保存。主要也是因为服务端暂时没有提供这个一张表去记录游戏结果,于是采用了前端记录的解决方案。
大家当时都玩的好开心啊,