用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 短路法代码精简
Aug 20 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
js实现进度条的方法
Feb 13 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
微信小程序实现评论功能
Nov 28 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 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中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
python实现异步回调机制代码分享
2014/01/10 Python
Python3+Appium安装使用教程
2019/07/05 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
Python页面加载的等待方式总结
2021/02/28 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
优秀辅导员事迹材料
2014/02/16 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书