使用 JavaScript 创建并下载文件
本文将介绍如何使用 JavaScript 创建文件,并自动/手动将文件下载。这在导出原始数据时会比较方便。
先上代码
/**
* 创建并下载文件
* @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。
大专栏 使用 JavaScript 创建并下载文件p>
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 创建并下载文件
[From] https://gaohaoyang.github.io/2016/11/22/js-create-file-and-download/ 本文将介绍如何使用 JavaScript 创建文 ...
- 在浏览器端用JS创建和下载文件
前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等). 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打 ...
- js创建并下载文件
先上代码: function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); va ...
- [转] 如何在ie11里使用a连接创建动态下载文件流
[From] https://segmentfault.com/q/1010000009470664 查了资料,可以使用微软独家的msSaveBlob, 这个方法支持ie10及以上. var down ...
- [转]用JavaScript在浏览器中创建下载文件
前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等. 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开 ...
- 如何用 JavaScript 下载文件
简介 我们知道,下载文件是一个非常常见的需求,但由于浏览器的安全策略的限制,我们通常只能通过一个额外的页面,访问某个文件的 url 来实现下载功能,但是这种用户体验非常不好. 幸好,HTML 5 里面 ...
- Java创建文件夹、创建文件、上传文件,下载文件
1.创建文件夹 /** * 判断文件夹是否存在 * @param myPath */ public static void judeDirExists(File myPath) { if (!myPa ...
- Web 在线文件管理器学习笔记与总结(9)下载文件
① 普通形式的文件可以使用超链接形式下载 <a href = '下载文件名'>点击下载</a> ② 如果下载图片.html 等类型的文件,使用header() 函数发送网页头信 ...
- QUICK-AP + BETTERCAP 替换局域网内其他用户的下载文件为自定义文件
环境需求 :kali系统 , .0版本 :quick-ap :bettercap :bettercap-proxy-modules :...... 主要环境搭建 目的:替换局域网用户的下载文件,变为我 ...
随机推荐
- Linux-waitpid介绍
1.waitpid与wait差别 (1).基本功能是一样的,都是用来回收子进程 (2).waitpid可以回收指定PID的子进程 (3).waitpid可以阻塞式或非阻塞式两种工作模式 2.代码示例 ...
- 纯手撸web框架
纯手撸web框架 一.Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返 ...
- 使用python列出目录下的所有文件
https://stackoverflow.com/questions/3964681/find-all-files-in-a-directory-with-extension-txt-in-pyth ...
- 34)static 静态成员和静态成员函数
1) static修饰的方法,只能在这个文件中使用,比如你是多文件编程,别的文件即使引入了我的 .h文件 但那时我的static方法也是不能用 2)C++的static的成员变量 比如 sta ...
- 注解ImportBeanDefinitionRegistrar ImportSelector
ImportBeanDefinitionRegistrar动态注册bean https://blog.csdn.net/jiachunchun/article/details/94569246 Spr ...
- python摄像头
import cv2 cap = cv2.VideoCapture(0) i = 0 while 1: ret, frame = cap.read() k = cv2.waitKey(1) if k ...
- VS IDE调试下将打印日志输出到输出窗口
int aBeginTime = GetTickCount(); TRACE("Current time begin:%d \n", aBeginTime); 查看输出窗口:
- [ZJOI2019]Minimax搜索(线段树+动态DP+树剖)
为什么我怎么看都只会10pts?再看还是只会50~70?只会O(n2(R-L+1))/O(nlogn(R-L+1))……一眼看动态DP可还是不会做…… 根节点的答案是叶子传上来的,所以对于L=R的数据 ...
- 为什么wget只下载某些网站的index.html? wget --random-wait -r -p -e robots=off -U mozilla http://www.example.com wget 下载整个网站,或者特定目录
wget -c -r -np -k -L -p http://blog.hesheyou.me -c, –continue 接着下载没下载完的文件 -r, –recursive 递归下载 -np, – ...
- IPC之——信号量集
信号量集用于对存在竞争的资源加锁 1.semId=semget(key,nsems,semflg) key:为信号量集名称,可以指定为0455等数字,也可以为PC_PRIVATE nsems:创建几个 ...