用JS在浏览器中创建下载文件

但受限于浏览器，很多情况下我们都只能给出个链接，让用户点击打开-》另存为。如下面这个链接：

file.js

用户点击这个链接的时候，浏览器会打开并显示链接指向的文件内容，显然，这并没有实现我们的需求。HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载(目前只有chrome、firefox和opera支持)。

下载时会直接使用链接的名字来作为文件名，但是是可以改的，只要给download加上想要的文件名即可，如：download=“not-a-file.js”。

但是这样还不够，以上的方法只适合用在文件是在服务器上的情况。如果在浏览器端js生成的内容，想让浏览器进行下载要如何办到呢？

其实还是有办法办到的，相信很多人都多少听过了DataURI这个词，比较常见的就是图片的src，如：

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。相关阅读:

Linux系统中使用netcat命令的奇技淫巧

PHP中使用hidef扩展代替define提高性能

javascript中String对象的slice()方法分析

PHP常用文件操作函数和简单实例分析

MySQL命令行导出与导入数据库

jquery实现表格本地排序的方法

三款Android炫酷Loading动画组件推荐

很实用的js选项卡切换效果

JavaScript实现的简单幂函数实例

node-webkit打包成exe文件被360误报木马的解决方法

jquery中post方法用法实例

修改SQL-SERVER数据库表结构的SQL命令附sql命令行修改数据库

使用电脑管家升级Win10却检测用户账户类型不支持该怎么办？

PHP5.3以上版本安装ZendOptimizer扩展