用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类中获取外部函数名的方法与代码
Sep 12 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 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
模仿OSO的论坛(一)
2006/10/09 PHP
php入门教程 精简版
2009/12/13 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP基本语法总结
2014/09/06 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python3 mmh3安装及使用方法
2019/10/09 Python
基于FME使用Python过程图解
2020/05/13 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
活动总结格式范文
2014/04/26 职场文书
心理学专业求职信
2014/06/16 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
回复函范文
2015/07/14 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
MySQL数据库事务的四大特性
2022/04/20 MySQL