用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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
javascript实现倒计时关闭广告
Feb 09 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/09/08 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
php调整服务器时间的方法
2015/04/03 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
Python抽象类的新写法
2015/06/18 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python开发简易版在线音乐播放器
2017/03/03 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python shelve模块实现解析
2019/08/28 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
校园文化标语
2014/06/18 职场文书
中文专业自荐书
2014/06/29 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
导游词之无锡梅园
2019/11/28 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
Hive常用日期格式转换语法
2022/06/25 数据库