本文将介绍如何使用 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 对象是一个字节序列。拥有 sizetype 等属性。

拥有 2 个只读状态 OPENDCLOSED。大专栏  使用 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)对象下。

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

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

模拟 click

element.click();

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

小结

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

大家当时都玩的好开心啊,

使用 JavaScript 创建并下载文件的更多相关文章

  1. [转] 使用 JavaScript 创建并下载文件

    [From] https://gaohaoyang.github.io/2016/11/22/js-create-file-and-download/ 本文将介绍如何使用 JavaScript 创建文 ...

  2. 在浏览器端用JS创建和下载文件

    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等). 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打 ...

  3. js创建并下载文件

    先上代码: function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); va ...

  4. [转] 如何在ie11里使用a连接创建动态下载文件流

    [From] https://segmentfault.com/q/1010000009470664 查了资料,可以使用微软独家的msSaveBlob, 这个方法支持ie10及以上. var down ...

  5. [转]用JavaScript在浏览器中创建下载文件

    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等. 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开 ...

  6. 如何用 JavaScript 下载文件

    简介 我们知道,下载文件是一个非常常见的需求,但由于浏览器的安全策略的限制,我们通常只能通过一个额外的页面,访问某个文件的 url 来实现下载功能,但是这种用户体验非常不好. 幸好,HTML 5 里面 ...

  7. Java创建文件夹、创建文件、上传文件,下载文件

    1.创建文件夹 /** * 判断文件夹是否存在 * @param myPath */ public static void judeDirExists(File myPath) { if (!myPa ...

  8. Web 在线文件管理器学习笔记与总结(9)下载文件

    ① 普通形式的文件可以使用超链接形式下载 <a href = '下载文件名'>点击下载</a> ② 如果下载图片.html 等类型的文件,使用header() 函数发送网页头信 ...

  9. QUICK-AP + BETTERCAP 替换局域网内其他用户的下载文件为自定义文件

    环境需求 :kali系统 , .0版本 :quick-ap :bettercap :bettercap-proxy-modules :...... 主要环境搭建 目的:替换局域网用户的下载文件,变为我 ...

随机推荐

  1. Linux-waitpid介绍

    1.waitpid与wait差别 (1).基本功能是一样的,都是用来回收子进程 (2).waitpid可以回收指定PID的子进程 (3).waitpid可以阻塞式或非阻塞式两种工作模式 2.代码示例 ...

  2. 纯手撸web框架

    纯手撸web框架 一.Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返 ...

  3. 使用python列出目录下的所有文件

    https://stackoverflow.com/questions/3964681/find-all-files-in-a-directory-with-extension-txt-in-pyth ...

  4. 34)static 静态成员和静态成员函数

    1) static修饰的方法,只能在这个文件中使用,比如你是多文件编程,别的文件即使引入了我的 .h文件  但那时我的static方法也是不能用 2)C++的static的成员变量   比如  sta ...

  5. 注解ImportBeanDefinitionRegistrar ImportSelector

    ImportBeanDefinitionRegistrar动态注册bean https://blog.csdn.net/jiachunchun/article/details/94569246 Spr ...

  6. python摄像头

    import cv2 cap = cv2.VideoCapture(0) i = 0 while 1: ret, frame = cap.read() k = cv2.waitKey(1) if k ...

  7. VS IDE调试下将打印日志输出到输出窗口

    int aBeginTime = GetTickCount(); TRACE("Current time begin:%d \n", aBeginTime); 查看输出窗口:

  8. [ZJOI2019]Minimax搜索(线段树+动态DP+树剖)

    为什么我怎么看都只会10pts?再看还是只会50~70?只会O(n2(R-L+1))/O(nlogn(R-L+1))……一眼看动态DP可还是不会做…… 根节点的答案是叶子传上来的,所以对于L=R的数据 ...

  9. 为什么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, – ...

  10. IPC之——信号量集

    信号量集用于对存在竞争的资源加锁 1.semId=semget(key,nsems,semflg) key:为信号量集名称,可以指定为0455等数字,也可以为PC_PRIVATE nsems:创建几个 ...