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


Posted in Javascript onOctober 25, 2019

先上代码

/**
 * 创建并下载文件
 * @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 标签,模拟点击事件,自动下载成功,最后再回收内存。下面我们来看看具体是怎么操作的。

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

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庆功会 的摇火箭大屏游戏中。最后的游戏结果排名,在请求了接口后,在前端直接生成并下载到了本地,作为记录保存。主要也是因为服务端暂时没有提供这个一张表去记录游戏结果,于是采用了前端记录的解决方案。

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

Javascript 相关文章推荐
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
jquery获取radio值实例
Oct 16 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
vue.js学习之递归组件
Dec 13 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 #Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 #Javascript
layui实现数据表格隐藏列的示例
Oct 25 #Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 #Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 #Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 #Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 #Javascript
You might like
PHP实现用户认证及管理完全源码
2007/03/11 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
node.js实现快速截图
2016/08/27 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
javascript 面向对象实战思想分享
2017/09/07 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
python和shell获取文本内容的方法
2018/06/05 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
英语自荐信常用语句
2013/12/13 职场文书
爱心捐款倡议书
2014/04/14 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
化工专业自荐书
2014/06/16 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
干部个人考察材料
2014/12/24 职场文书
2015年人事科工作总结
2015/04/28 职场文书
合作合同协议书
2016/03/21 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记