用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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python实现播放音频和录音功能示例代码
2018/12/30 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
普通大学毕业生自荐信范文
2014/02/23 职场文书
教师师德承诺书
2014/03/26 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技