用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客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
HTML上传控件取消选择
Mar 06 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
通过url查找a元素并点击
Apr 09 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
vue+element实现打印页面功能
May 20 Javascript
微信小程序实现轮播图指示器
Jun 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 面向对象实现代码
2009/11/11 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
Vue组件开发初探
2017/02/14 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python常用函数详解
2016/09/13 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python实现归并排序算法
2018/11/22 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
工程业务员工作职责
2013/12/07 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
四风自我剖析材料
2014/09/30 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
详解Python requests模块
2021/06/21 Python