用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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
vue-cli如何添加less 以及sass
Jul 06 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
使用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记录日志的实现代码
2011/08/08 PHP
php图片添加水印例子
2016/07/20 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
C语言50道问题
2014/10/23 面试题
新学期开学演讲稿
2014/05/24 职场文书
个人自荐书范文
2015/03/09 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
Python闭包的定义和使用方法
2022/04/11 Python
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS