用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中的Split使用方法与技巧
Mar 09 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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程序?
2006/12/08 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript中string对象
2015/06/12 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
js面向对象的写法
2016/02/19 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python实现串口通信的示例代码
2020/02/10 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
七年级音乐教学反思
2014/01/26 职场文书
募捐感谢信
2015/01/22 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
初中同学会致辞
2015/08/01 职场文书
大学体育课感想
2015/08/10 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA