用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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
新手入门常用代码集锦
Jan 11 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 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/10/09 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
python中partial()基础用法说明
2018/12/30 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
super关键字的用法
2012/04/10 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
质检部岗位职责
2013/11/11 职场文书
春节联欢会策划方案
2014/05/16 职场文书
酒桌上的祝酒词
2015/08/12 职场文书