使用 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。

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

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

赞 (0)

相关推荐

  • php+js实现的无刷新下载文件功能示例

    本文实例讲述了php+js实现的无刷新下载文件功能.分享给大家供大家参考,具体如下: 服务器端页面 步骤就是,设置头文件参数,然后读入并输出文件.下面代码的file_get_contents可以使用fread,fclose代替. download.php <?php $filename = $_GET['filename']; $path = __DIR__."/file/".$filename; Header( "Content-type: application/o

  • JS下载文件|无刷新下载文件示例代码

    后台代码Handler.ashx 复制代码 代码如下: <%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { string fileName = "web.conf

  • js下载文件并修改文件名

    用js下载文件,使用<a>标签,添加download属性即可. var a = document.createElement("a"); a.href = "http://XXX.com/audioStream/8a9dbae9d0859e48fc1f590fcf6d4ccc.mp3": a.download ="test.mp3"; a.click(); 但是如果想给文件重新命名,貌似js无法实现. 因此考虑后台实现,用java代理

  • 用JS在浏览器中创建下载文件

    用JS在浏览器中创建下载文件

    但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开->另存为.如下面这个链接: 复制代码 代码如下: <a href="file.js">file.js</a> 用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求.HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载(目前只有chrome.firefox和opera支持). 下载时会

  • js自动下载文件到本地的实现代码

    复制代码 代码如下: <html> <head> <title>js自动下载文件到本地</title> <script language="javascript" type="text/javascript"> function InitAjax() { var ajax; if(window.ActiveXObject){ var versions = ['Microsoft.XMLHTTP', 'MSX

  • JavaScript实现的浏览器下载文件的方法

    废话不多说了,直接给大家贴代码了,具体代码如下所示: function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download", ""); var evObj = document.createEvent('MouseEvents'); evObj.initMouseEvent( '

  • JAVASCRIPT模式窗口中下载文件无法接收iframe的流

    在打开的模式窗口中,如果要借助于模式窗口接受服务器的流,通常需要隐藏一个iframe;有时候,然后采用iframe.src的形式去做请求:有时,在下载时发现服务器无法接收iframe的流,因为在模式窗口中没有触发iframe的src重新定向事件,普通的窗口无此问题. 具体解决办法: 在模式窗口的父窗口中隐藏一个iframe,下载的地址指向这个iframe.

  • 使用JS代码实现点击按钮下载文件

    正文 有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 font-awesome 上面的.使用时,首先将 font-awesome 整个文件夹下载下来,利用bower或者是自己去官网上面下载都行. 将整个文件夹放在项目文件中之后,在页面上面引入css文件 <link href="libs/font-awesome-4.7.0/css/font

  • 通过JavaScript下载文件到本地的方法（单文件）

    最近在做一个文件下载的功能,这里把做的过程中用的技术和坑简要总结下. 1. 单文件下载(a标签) 同源单文件 针对单文件的情况下,同源的文件,可以通过 < a> 标签的 download 属性下载文件 const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt.style.display = 'none'; docume

  • 使用 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.

  • 通过Javascript创建一个选择文件的对话框代码

    通过Javascript创建一个选择文件的对话框代码

    CSS 样式: 复制代码 代码如下: DIV.neat-dialog-cont { Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% } DIV.neat-dialog-bg { Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDT

  • 使用java实现http多线程断点下载文件(二)

    下载工具我想没有几个人不会用的吧,前段时间比较无聊,花了点时间用java写了个简单的http多线程下载程序,纯粹是无聊才写的,只实现了几个简单的功能,而且也没写界面,今天正好也是一个无聊日,就拿来写篇文章,班门弄斧一下,觉得好给个掌声,不好也不要喷,谢谢! 我实现的这个http下载工具功能很简单,就是一个多线程以及一个断点恢复,当然下载是必不可少的.那么大概先整理一下要做的事情: 1.连接资源服务器,获取资源信息,创建文件 2.切分资源,多线程下载 3.断点恢复功能 4.下载速率统计 大概就这几

  • javascript使用Blob对象实现的下载文件操作示例

    本文实例讲述了javascript使用Blob对象实现的下载文件操作.分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象就是继承自Blob对象,且在Blob的基础上进行扩展,以便支持用户系统上的文件. 前言 最近在做以post请求方式导出excel时,想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理,最后使用URL生成链接,供浏

  • JavaScript进阶之前端文件上传和下载示例详解

    JavaScript进阶之前端文件上传和下载示例详解

    目录 文件下载 1.通过a标签点击直接下载 2.open或location.href 3.Blob和Base64 文件上传 文件上传思路 File文件 上传单个文件-客户端 上传文件-服务端 多文件上传-客户端 大文件上传-客户端 大文件上传-服务端 文件下载 1.通过a标签点击直接下载 <a href="https:xxx.xlsx" rel="external nofollow" download="test">下载文件</

  • JavaScript 用fetch 实现异步下载文件功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <button id='btn'>下载</button> <span id='status'></span> &

  • 求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路

    求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路

    下面代码使用curl模拟post请求链接后直接显示出了文件内容,如何修改成不显示内容而直接下载请求到的.torrent格式文件呢 function curl_post($header,$data,$url) { $ch = curl_init(); $res= curl_setopt ($ch, CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); curl_setopt($ch, CURLOPT_SSL_VERI

  • Laravel 中创建 Zip 压缩文件并提供下载的实现方法

    如果您需要您的用户支持多文件下载的话,最好的办法是创建一个压缩包并提供下载.下面通过本文给大家看下在 Laravel 中的实现. 事实上,这不是关于 Laravel 的,而是和 PHP 的关联更多,我们准备使用从 PHP 5.2 以来就存在的 ZipArchive 类 ,如果要使用,需要确保php.ini 中的 ext-zip 扩展开启. 任务 1: 存储用户的发票文件到 storage/invoices/aaa001.pdf 下面是代码展示: $zip_file = 'invoices.zip

随机推荐