广告位联系
返回顶部
分享到

使用JavaScript创建并下载文件(模拟点击)方法

JavaScript 来源:互联网搜集 作者:秩名 发布时间:2019-10-26 13:57:04 人浏览
摘要

代码如下: /** * 创建并下载文件 * @param {String} fileName 文件名 * @param {String} content 文件内容 */function createAndDownloadFile(fileName, content) { var aTag = document.createElement(a); var blob = new Blob([content]); aTag.download

代码如下:

/**
 * 创建并下载文件
 * @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-[-/a>

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


var blob = new Blob([content]);


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

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


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

Blob URLs

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

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

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

模拟 click
 

element.click();


在 W3C 中很早就有这个
规范-[-/a>,不需要写繁琐的模拟事件触发的代码。

小结

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


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jb51.net/article/172849.htm
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计