Chrome中利用HTML5实现具有文件“编辑”及“上载”功能的本地应用

Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用

【Data URL】

最新的HTML5浏览器中，已经支持用Data URL（RFC2397）来引用“外部”资源了。

比如下面的链接，在HTML5浏览器中点击后，会转到一个新页面，显示“Hello Data URL!”字样。

<a href="data:text/plain,Hello Data URL!" download="hello.txt">hello</a><a href="data:text/html;charset=utf8,%3Ch1%3E%E4%BD%A0%E5%A5%BD%3C/h1%3E" download="URL escaped.html">URL escaped</a><a href="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7" download="Larry.gif">Larry</a><a href="data:application/octet-stream,12345" download="octet-stream.bin">octet-stream</a>

遗憾的是Firefox 16还不支持这样的属性。

另外，Chrome下载默认不提示文件保存位置和名称。若希望每次都提示，可在Chrome的设置中修改。

【附】

以往要在浏览器中实现这么一个另存为的功能，可以用IE的document.execCommand('SaveAs')模拟，但是对复杂的数据格式就没法处理了。

或者配合服务端程序可以处理复杂的数据，但处理过程也变复杂了，纯粹的本地应用还必须搭建一个额外的服务器。

再就是利用HTA+FSO/ADO.Stream来生成文件，但是各代Windows系统中没用统一完善的通用对话框控件来实现“另存为”对话框，要么单独注册，要么利用Office中的对话框组件，或者其他方式模拟实现，结果这个非核心功能导致整个实现复杂了许多。

对于更复杂的数据，Data URL可能不太够用，这时可以考虑功能更强大的HTML5 File API，使用createObjectURL()方法可以得到比Data URL更短的URL，这里不作具体叙述。

关于Chrome 22支持的<a>的标签属性download，我是从“zip.js”（一个开源的zip压缩解压JS库）的demo中发现的。实现此属性最早的Chrome版本未知。