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


Posted in Javascript onMarch 05, 2014

但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》另存为。如下面这个链接:

<a href=”file.js”>file.js</a>

用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求。HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera支持)。

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

下载时会直接使用链接的名字来作为文件名,但是是可以改的,只要给download加上想要的文件名即可,如:download=“not-a-file.js”。

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

但是这样还不够,以上的方法只适合用在文件是在服务器上的情况。如果在浏览器端js生成的内容,想让浏览器进行下载要如何办到呢?

其实还是有办法办到的,相信很多人都多少听过了DataURI这个词,比较常见的就是图片的src,如:

<img src=”data:image/gif;base64,R0lGOXXXXX">

DataURI的解释可以移步这里,本人就不在解释了。

那么,现在要将js生成的内容进行下载就有法可依了。封装成一个方法如下:

function downloadFile(aLink, fileName, content){
    aLink.download = fileName;

    aLink.href = "data:text/plain," + content;

}

调用downloadFile之后,用户点击链接,就能触发浏览器下载。

但是,还不够,上面的办法有两个硬伤,会导致流失很多懒人美眉:

下载的文件类型限制死了,美眉要下载处理后的果照怎么办?
下载还要再点击一下,太麻烦啦。
要解决文件类型的问题,可以用浏览器的新API(URL.createObjectURL)来解决问题,URL.createObjectURL通常都是用来创建图片的DataURI用来显示图片,这里用来下载文件,让浏览器来帮我们设定好文件类型。

URL.createObjectURL的参数是File对象或者Blob对象,File对象也就是通过input[type=file]选择的文件,Blob对象是二进制大对象,详细说明可参考这里。

现在,我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。
文件的自动下载也挺好办,自己构建一个UI点击事件,再自动触发下,就能实现自动下载啦。

现在来看看最终代码:

function downloadFile(fileName, content){
    var aLink = document.createElement('a');

    var blob = new Blob([content]);

    var evt = document.createEvent("HTMLEvents");

    evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈

    aLink.download = fileName;

    aLink.href = URL.createObjectURL(blob);

    aLink.dispatchEvent(evt);

}

现在,只要一调用downloadFile,文件就自动下载了,是不是很爽咧,^_^。

注:目前(2014-01)Blob和URL.createObjectURL在标准浏览器里面都不再需要加私有前缀,可以放心使用啦啦啦~~如果你不放心,可以查查Can I Use。

Javascript 相关文章推荐
禁止你的左键复制实用技巧
Jan 04 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 #Javascript
js写的方法实现上传图片之后查看大图
Mar 05 #Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 #Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 #Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 #Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 #Javascript
js时间比较示例分享(日期比较)
Mar 05 #Javascript
You might like
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
javascript相关事件的几个概念
2015/05/21 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python hmac模块使用实例解析
2019/12/24 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python接口开发实现步骤详解
2020/04/26 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
关于环保的建议书
2014/05/12 职场文书
保密工作目标责任书
2014/07/28 职场文书
2014年维修工作总结
2014/11/22 职场文书
2015学校年度工作总结
2015/05/11 职场文书