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

【Data URL】

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

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

Hello

如果文本内容包含特殊字符怎么办?Data URL也是一种URL,也可以使用通用的URL转义编码:

URL escaped
上面的例子都是纯文本数据。其实Data URL也可以表示二进制数据,用Base64编码即可(当然URL转义也能实现)。

下面是一个表示GIF图片的Data URL(引用自RFC2397):

Larry

也不是所有的二进制文件格式都必须编码,当实际数据不包含特殊字符的时候,不编码也是可以的:

octet-stream
上面的链接都可以点右键“另存为”本地磁盘文件,这个过程就像通常下载远程文件的操作一样。
这样的话,理论上我们可以将任何数据转化为一个Data URL链接,以便让用户“下载”。


【自动下载和默认文件名】
上面已经实现了生成文件数据并保存到本地的功能,但是还有不足:

对于浏览器能够显示的MIME类型,点击链接的话会直接在浏览器中显示,比如纯文本、HTML以及图片等类型。

若手动将链接另存,Chrome 22中文版弹出的保存框默认主文件名永远为“下载”,Firefox 16则是一串莫名其妙并以.part结尾的字符串做默认名。

对于浏览器不能显示的MIME类型,Chrome 22和Firefox 16都会自动调用下载功能。但是Chrome中文版下载的默认主文件名仍然总为“下载”,Firefox 16则还是莫名其妙的字符串。


不过,Chrome 22中已经对元素增加了一个新的标签属性“download”来解决这个问题。

hello
URL escaped
Larry
octet-stream
对于指定了download标签属性的链接,点击后,Chrome 总是会执行下载操作,并且下载保存的默认文件名即为download的属性值。

遗憾的是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支持的的标签属性download,我是从“zip.js”(一个开源的zip压缩解压JS库)的demo中发现的。实现此属性最早的Chrome版本未知。

你可能感兴趣的:(chrome,Data,URL,download,html5,HTML5,HTML5,Chrome,HTML)