h5(H5)下载功能,用JS在浏览器中创建下载文件
来源:互联网 发布:南京软件大道租房 编辑:程序博客网 时间:2024/05/17 07:23
转载:http://www.jb51.net/article/47723.htm
但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》另存为。如下面这个链接:
<a href=”file.js”>file.js</a>
用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求。HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera支持)。
下载时会直接使用链接的名字来作为文件名,但是是可以改的,只要给download加上想要的文件名即可,如:download=“not-a-file.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。
转载:http://www.jb51.net/article/47723.htm
- h5(H5)下载功能,用JS在浏览器中创建下载文件
- h5 文件下载
- H5 文件下载
- 在浏览器端用JS创建和下载文件
- 在浏览器端用JS创建和下载文件
- H5 下载文件到本地
- H5 下载文件到本地
- 用JS在浏览器中创建下载文件如下可以做到
- 用js 触发 浏览器的下载功能下载文件
- 用js 触发 浏览器的下载功能下载文件
- 使用h5+API下载并打开文件
- h5下载图片
- 浏览器端用JS创建和下载文件
- js下载文件功能
- JS创建文件下载
- 禁用混合开发中H5页面的浏览器默认功能
- android webview中嵌套的h5页面下载apk
- 利用nw.js结合h5实现创建exe文件
- 系统之家win7 32位&64位iso极速旗舰版 v12.1
- Android实现图片圆角
- 一些可以参考的常用工具库类整理
- 230. Kth Smallest Element in a BST
- maven 编译spring-boot报错
- h5(H5)下载功能,用JS在浏览器中创建下载文件
- Java NIO:IO与NIO的区别
- java一个最简单的反射的例子
- 2017.12.6-2017.12.19 学习情况
- Emmet的简单使用
- mysql命令
- 查询本日、本周、本月的数据
- OverScrollLinearLayoutManager
- 魅族MX5——视频播放,横竖屏切换黑屏,有声音没图像