在浏览器端用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生成的内容进行下载就有法可依了。封装成一个方法以下：

function downloadFile(aLink,fileName,content){    
      aLink.download=fileName;    
      aLink.href="data:text/plain,"+content;
}

调用downloadFile以后，用户点击连接，就能触发浏览器下载。

Not enough！

可是，还不够，上面的办法有两个硬伤，会致使流失不少懒人美眉：

1. 下载的文件类型限制死了，美眉要下载处理后的果照怎么办？

2. 下载还要再点击一下，太麻烦啦。

要解决文件类型的问题，能够用浏览器的新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下会报错     
     aLink.download = fileName;    
    aLink.href = URL.createObjectURL(blob);    
   aLink.dispatchEvent(evt);
}

如今，只要一调用downloadFile，文件就自动下载了，是否是很爽咧，^_^。

注：目前（2014-01-02）Blob和URL.createObjectURL在标准浏览器里面都再也不须要加私有前缀，能够放心使用啦啦啦～～若是你不放心，能够查查Can I Use。