chrome直接下载⽤JS在浏览器中创建下载⽂件
但受限于浏览器，很多情况下我们都只能给出个链接，让⽤户点击打开-》另存为。如下⾯这个链接：
复制代码代码如下:
<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（ateObjectURL）来解决问题，ateObjectURL通常都是⽤来创建图⽚的DataURI⽤来显⽰图⽚，这⾥⽤来下载⽂件，让浏览器来帮我们设定好⽂件类型。
现在，我们只要⽤content创建⼀个ObjectURL并赋值给aLink即可解决⽂件类型的限制问题。
⽂件的⾃动下载也挺好办，⾃⼰构建⼀个UI点击事件，再⾃动触发下，就能实现⾃动下载啦。
现在来看看最终代码：
复制代码代码如下:
function downloadFile(fileName, content){
var aLink = ateElement('a');
var blob = new Blob([content]);
var evt = ateEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
aLink.download = fileName;
aLink.href = ateObjectURL(blob);
aLink.dispatchEvent(evt);
}
现在，只要⼀调⽤downloadFile，⽂件就⾃动下载了，是不是很爽咧，^_^。
注：⽬前（2014-01）Blob和ateObjectURL在标准浏览器⾥⾯都不再需要加私有前缀，可以放⼼使⽤啦啦啦～～如果你不放⼼，可以查查Can I Use。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。