在浏览器端用JS创建和下载文件
前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑、在线代码编辑、iPresst等)。
但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》另存为。如下面这个链接:
<a href=”file.js”>file.js</a>
用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求。
HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera支持)。
下载时会直接使用链接的名字来作为文件名,但是是可以改的,只要给download加上想要的文件名即可,如:download=“not-a-file.js”。
Not enough!
但是这样还不够,以上的方法只适合用在文件是在服务器上的情况。如果在浏览器端js生成的内容,想让浏览器进行下载要如何办到呢?
其实还是有办法办到的,相信很多人都多少听过了DataURI这个词,比较常见的就是图片的src,如:
<img src=”
data:image/gif;base64,R0lGOXXXXX">
DataURI的解释可以移步这里,本人就不在解释了。
那么,现在要将js生成的内容进行下载就有法可依了。封装成一个方法如下:
1
2
3
4
|
function downloadFile(aLink, fileName, content){
aLink.download = fileName;
aLink.href = "data:text/plain," + content;
}
|
调用downloadFile之后,用户点击链接,就能触发浏览器下载。
Not enough!
但是,还不够,上面的办法有两个硬伤,会导致流失很多懒人美眉:
- 下载的文件类型限制死了,美眉要下载处理后的果照怎么办?
- 下载还要再点击一下,太麻烦啦。
要解决文件类型的问题,可以用浏览器的新API(URL.createObjectURL)来解决问题,URL.createObjectURL通常都是用来创建图片的DataURI用来显示图片,这里用来下载文件,让浏览器来帮我们设定好文件类型。
URL.createObjectURL的参数是File对象或者Blob对象,File对象也就是通过input[type=file]选择的文件,Blob对象是二进制大对象,详细说明可参考这里。
现在,我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。
文件的自动下载也挺好办,自己构建一个UI点击事件,再自动触发下,就能实现自动下载啦。
现在来看看最终代码:
1
2
3
4
5
6
7
8
9
|
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-02)Blob和URL.createObjectURL在标准浏览器里面都不再需要加私有前缀,可以放心使用啦啦啦~~如果你不放心,可以查查Can I Use。
在浏览器端用JS创建和下载文件的更多相关文章
- js创建并下载文件
先上代码: function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); va ...
- IE浏览器下用JS创建文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [转] 使用 JavaScript 创建并下载文件
[From] https://gaohaoyang.github.io/2016/11/22/js-create-file-and-download/ 本文将介绍如何使用 JavaScript 创建文 ...
- 使用 JavaScript 创建并下载文件
先上代码 Blob 对象 Blob URLs 模拟 click 小结 参考 本文将介绍如何使用 JavaScript 创建文件,并自动/手动将文件下载.这在导出原始数据时会比较方便. 先上代码 /** ...
- 浏览器端用JS实现创建和下载图片
问题场景 在前端很多的项目中,文件下载的需求很常见.尤其是通过JS生成文件内容,然后通过浏览器端执行下载的操作.如图片,Execl 等的导出功能.日前,项目中就遇到了这类需求,在浏览器端实现保存当前网 ...
- js之Ajax下载文件
传统上,客户端将依靠浏览器来处理从服务器下载文件.然而,这种方法需要打开一个新的浏览器窗口,iframe或任何其他类型的不友好和黑客行为.为下载请求添加额外的头信息也很困难.更好的解决方案是使用HTM ...
- 浏览器页面请求js、css大文件处理
当页面引用一个比较大的js和css文件时,会出现较大下载延迟,占用带宽的问题,如果一个应用里有很多这样的js或CSS文件,那么就需要优化了. 比如ext-all.js有1.4M,页面引用这个文件,正常 ...
- js实现前端下载文件
在前端下载文本格式的文件时,可采用下面的方式: (1)创建基于文件内容的Blob对象: (2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址. (3 ...
- 浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码,前后端解决方案
项目中有用到文件下载功能,之前在处理下载时对IE浏览器下文件下载名进行过处理,测试也没有问题,但是功能上线后,业务反馈IE11文件下载文件名依然乱码.打印User-Agent字符串如下: IE11 U ...
随机推荐
- PowerBuilder -- 日期
#PB自带日期相关函数 Date(...), DateTime(...), RelativeDate(...), Year(...), Month(...), Day(...), DaysAfter( ...
- A20地址线问题
[0]README text description from Zhaojiong's perfect analysis of Linux kernel . [1]A20地址线问题(干货来了) 198 ...
- 模式识别开发之项目---基于opencv的手势识别
我使用OpenCV2.4.4的windows版本+Qt4.8.3+VS2010的编译器做了一个手势识别的小程序. 本程序主要使到了Opencv的特征训练库和最基本的图像处理的知识,包括肤色检测等等. ...
- struts2_6_多个struts配置文件的应用
在大部分应用里,随着应用规模的添加,系统中Action的数量也会大量添加.导致struts.xml配置文件变的很臃肿,为了避免struts.xml文件过于庞大.臃肿,提高struts.xml文件的可读 ...
- python 基础 3.2 文件 for 练习
#/usr/bin/python #coding=utf-8 #@Time :2017/11/1 22:19 #@Auther :liuzhenchuan #@File :1030-1031练 ...
- android菜鸟学习笔记1----环境搭建
Step1 JDK安装及配置: 1.下载并安装JDK: 根据自己系统情况,选择安装相应的JDK版本 当前系统:64位WIN8,内存8G 选择了Java SE 8u45 即JDK 1.8.0_45,可以 ...
- 各种python 函数參数定义和解析
python 中的函数參数是赋值式的传递的,函数的使用中要注意两个方面:1.函数參数的定义过程,2.函数參数在调用过程中是怎样解析的. 首先说一下在python 中的函数调用过程是分四种方式的.这里且 ...
- AndroidUI组件之ImageSwitcher
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/gc_gongchao/article/details/25594669 今天继续AndroidUI组 ...
- phpPHP创建创建jpg格式图片以及压缩图片(转)
其实是因为一些业务上的需求,所以需要对用户上传后的图片进行压缩,因为上传的图片比较大,显示的时候加载起来如果网速不给力的话就很吃力了,而且大图片也浪费空间,于是找了一下相关的资源,主要方法在开源中国上 ...
- VIM中使用tab键自动完成(vim tab键自动补全 )插件supertab
supertab.vmb 这个插件好好用, Tab自动补全 http://www.vim.org/scripts/script.php?script_id=1643 安装步骤: 1.下载 supert ...