用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 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
Angular路由简单学习
Dec 26 Javascript
js实现显示手机号码效果
Mar 09 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP微商城开源代码实例
2019/03/27 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python如何在bool函数中取值
2020/09/21 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
个人投资计划书
2014/05/01 职场文书
七年级地理教学计划
2015/01/22 职场文书
观后感开头
2015/06/19 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python