本文介绍如何在浏览器端通过JavaScript实现文件下载。首先利用HTML5的a标签download属性处理服务器文件，随后针对动态生成的内容，结合Blob对象与URL.createObjectURL API，封装自动触发下载的方法，解决文件类型限制及手动点击问题。
HTML5 download属性实现服务器文件下载
受限于浏览器机制，许多场景下我们只能提供链接，引导用户点击后通过“打开”或“另存为”方式获取文件。例如以下链接示例：
代码如下:
<a href="file.js">file.js</a>当用户点击该链接时，浏览器默认会直接打开并显示文件内容，这通常不符合我们的下载需求。HTML5规范为a标签引入了download属性，添加该属性后，点击链接将触发下载行为而非预览（目前主要支持Chrome、Firefox和Opera浏览器）。
默认情况下，下载文件名会直接使用链接指向的文件名。若需自定义文件名，可在download属性中指定，例如：download="not-a-file.js"。
基于DataURI的JavaScript动态内容下载
上述方法仅适用于服务器端已有的文件。若文件内容由浏览器端的JavaScript动态生成，则需采用其他技术手段实现下载。
解决方案涉及DataURI技术，该技术常用于图片src属性，例如：
代码如下:
<img src="data:image/gif;base64,R0lGOXXXXX">关于DataURI的详细解释可参考相关文档，此处不再赘述。
基于DataURI，我们可以实现JavaScript生成内容的下载功能。以下是一个封装好的方法示例：
代码如下:
function downloadFile(aLink, fileName, content){
aLink.download = fileName;
aLink.href = "data:text/plain," + content;
}调用上述downloadFile方法后，用户点击链接即可触发浏览器下载。然而，该方法存在两个主要局限：
利用Blob与URL.createObjectURL实现自动下载
一是下载的文件类型被固定为纯文本，无法满足其他格式文件（如图片）的下载需求；二是仍需用户手动点击链接，体验不够便捷。为解决文件类型限制问题，可利用浏览器提供的URL.createObjectURL API。该API通常用于创建图片的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。