用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运行机制之this详细介绍
Feb 07 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JavaScript构造函数详解
Dec 27 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue中template的三种写法示例
Oct 21 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python多进程共享变量
2016/04/06 Python
python操作mysql数据库
2017/03/05 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python GUI计算器的实现
2020/10/09 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
单位承诺书格式
2014/05/21 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
护士节慰问信
2015/02/15 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
Element实现动态表格的示例代码
2021/08/02 Javascript