用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获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
jQuery选择器实例应用
Jan 05 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
js正则相关知识点专题
May 10 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 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/21 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
python读取oracle函数返回值
2016/07/18 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
大学生优秀自荐信范文
2014/02/25 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
Python Matplotlib绘制动画的代码详解
2022/05/30 Python