用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 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 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开发GUI
2006/10/09 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHP strripos函数用法总结
2019/02/11 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
xml和web特殊字符
2009/04/28 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
React Native中Navigator的使用方法示例
2017/10/13 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python网络编程之五子棋游戏
2020/05/14 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
党员2014两会学习心得体会
2014/03/17 职场文书
行政内勤岗位职责
2014/04/07 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
求职信范文大全
2014/05/26 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js