用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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
详解javascript数组去重问题
Nov 06 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
vue之数据交互实例代码
Jun 20 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
小程序实现录音上传功能
Nov 22 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python使用win32com库播放mp3文件的方法
2015/05/30 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python中list列表的高级函数
2016/05/17 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python的依赖管理的实现
2019/05/14 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
2016五一劳动节慰问信
2015/11/30 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python