使用 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 学习笔记01 JQuery初接触
May 06 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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编程中尝试程序并发的几种方式总结
2016/03/21 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
快速入手Python字符编码
2016/08/03 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python实现动态数组的示例代码
2019/07/15 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
机关门卫的岗位职责
2014/04/29 职场文书
市场营销计划书范文
2015/01/16 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js