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

但受限于浏览器，很多情况下我们只能给用户一个链接，让用户点击打开->另存为。以下链接：复制代码如下：a href="file.js "当file.js/a用户点击此链接时，浏览器将打开并显示该链接指向的文件内容。显然，这不符合我们的需求。HTML5给标签a增加了一个下载属性，只要有这个属性，浏览器在点击链接时就不会打开链接指向的文件，而是下载(目前只有chrome、firefox和opera支持)。

下载时会直接使用链接的名称作为文件名，但是可以通过添加想要下载的文件名来更改，例如：download="not-a-file.js "。

但这还不够。上述方法只适用于文件在服务器上的情况。如果想让浏览器在浏览器端下载js生成的内容，怎么做？其实还是有办法的。相信很多人都在一定程度上听过DataURI这个词，比较常见的就是图片的src，比如：复制代码如下： img src=" data : image/gif；base64，R0lGOXXXXX'DataURI的解释可以移到这里，我就不解释了。所以，现在有了下载js生成的内容的法律。打包成方法如下：复制代码如下：函数下载文件(alink，filename，content) {alink。下载=文件名；alink . href=' data : text/plain '，内容；}调用downloadFile后，用户点击链接，即可触发浏览器下载。然而，这还不够。以上方法有两个严重的伤害，会导致很多懒女孩的流失：下载的文件类型仅限于死亡。女生想下载处理后的照片该怎么办？下载后再点击太麻烦了。为了解决文件类型的问题，我们可以使用浏览器的新API(URL.createObjectURL)来解决这个问题。URL.createObjectURL通常是用来创建图片的DataURI，用来在这里显示图片和下载文件，这样浏览器就可以帮助我们设置文件类型。参数是一个文件对象或斑点对象，它是通过输入[类型=文件]选择的文件，斑点对象是一个大的二进制对象。详情请参考。现在，我们只需要创建一个包含内容的ObjectURL，并将其分配给aLink，就可以解决文件类型限制的问题。自动文件下载也很容易处理。自己搭建一个UI点击事件，然后自动触发，就可以实现自动下载了。现在我们来看看最后的代码：复制代码如下：函数下载文件(filename，content){ varalink=document . create element(' a ')；var blob=新Blob([内容])；var evt=document . createevent(' HTMLEvents ')；evt.initEvent('click '，false，false)；//如果没有最后两个参数，initEvent将在FF下报告错误。感谢Barret Lee的反馈aLink.download=fileNamealink . href=URL . createobjecturl(blob)；alink . dispatchevent(evt)；}现在，只要调用downloadFile，文件就会自动下载。很酷吧？_.注意：目前(2014年1月)，BLOB和URL.createObjectURL在标准浏览器中不再需要私有前缀，可以放心使用~ ~如果不放心，可以勾选我可以使用。