使用 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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
elementUI中Table表格问题的解决方法
Dec 04 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
JS实现长图上下滚动效果
Mar 19 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加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python自定义一个异常类的方法
2019/06/27 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
自我反省检讨书
2014/01/23 职场文书
趣味运动会活动方案
2014/02/12 职场文书
小班秋游活动方案
2014/02/22 职场文书
《春笋》教学反思
2014/04/15 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
2015年林业工作总结
2015/05/14 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Python字符串格式化方式
2022/04/07 Python