脚本宝典收集整理的这篇文章主要介绍了html5教程-Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
【Data URL】
最新的HTML5浏览器中，已经支持用Data URL（Rfc2397）来引用“外部”资源了。
比如下面的链接，在HTML5浏览器中点击后，会转到一个新页面，显示“Hello Data URL!”字样。
[html]
<a href="data:text/plain,Hello Data URL!">Hello</a>
如果文本内容包含特殊字符怎么办？Data URL也是一种URL，也可以使用通用的URL转义编码：
[html]
<a href="data:text/html;charset=utf8,%3Ch1%3E%E4%BD%A0%E5%A5%BD%3C/h1%3E">URL escaPEd</a>
上面的例子都是纯文本数据。其实Data URL也可以表示二进制数据，用Base64编码即可（当然URL转义也能实现）。
下面是一个表示Gif图片的Data URL（引用自RFC2397）：
[html]
<a href="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAamAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjqu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEBTLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjDFnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3f2JQFo97Vriy/Xl4/F1CF5VWzXyym7PHhhx4dbgYKAAA7">Larry</a>
也不是所有的二进制文件格式都必须编码，当实际数据不包含特殊字符的时候，不编码也是可以的：
[html]
<a href="data:application/octet-stream,12345">octet-stream</a>
上面的链接都可以点右键“另存为”本地磁盘文件，这个过程就像通常下载远程文件的操作一样。
这样的话，理论上我们可以将任何数据转化为一个Data URL链接，以便让用户“下载”。
【自动下载和默认文件名】
上面已经实现了@R_304_2106@数据并保存到本地的功能，但是还有不足：
对于浏览器能够显示的MIME类型，点击链接的话会直接在浏览器中显示，比如纯文本、HTML以及图片等类型。
若手动将链接另存，Chrome 22中文版弹出的保存框默认主文件名永远为“下载”，Firefox 16则是一串莫名其妙并以.part结尾的字符串做默认名。
对于浏览器不能显示的MIME类型，Chrome 22和Firefox 16都会自动调用下载功能。但是Chrome中文版下载的默认主文件名仍然总为“下载”，Firefox 16则还是莫名其妙的字符串。
不过，Chrome 22中已经对<a>元素增加了一个新的标签属性“download”来解决这个问题。
[html]
<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>
对于指定了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支持的<a>的标签属性download，我是从“zip.js”（一个开源的zip压缩解压JS库）的demo中发现的。实现此属性最早的Chrome版本未知。
【Data URL】
最新的HTML5浏览器中，已经支持用Data URL（RFC2397）来引用“外部”资源了。
比如下面的链接，在HTML5浏览器中点击后，会转到一个新页面，显示“Hello Data URL!”字样。
[html]
<a href="data:text/plain,Hello Data URL!">Hello</a>
如果文本内容包含特殊字符怎么办？Data URL也是一种URL，也可以使用通用的URL转义编码：
[html]
<a href="data:text/html;charset=utf8,%3Ch1%3E%E4%BD%A0%E5%A5%BD%3C/h1%3E">URL escaped</a>
上面的例子都是纯文本数据。其实Data URL也可以表示二进制数据，用Base64编码即可（当然URL转义也能实现）。
下面是一个表示GIF图片的Data URL（引用自RFC2397）：
[html]
<a href="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7">Larry</a>
也不是所有的二进制文件格式都必须编码，当实际数据不包含特殊字符的时候，不编码也是可以的：
[html]
<a href="data:application/octet-stream,12345">octet-stream</a>
上面的链接都可以点右键“另存为”本地磁盘文件，这个过程就像通常下载远程文件的操作一样。
这样的话，理论上我们可以将任何数据转化为一个Data URL链接，以便让用户“下载”。
【自动下载和默认文件名】
上面已经实现了生成文件数据并保存到本地的功能，但是还有不足：
对于浏览器能够显示的MIME类型，点击链接的话会直接在浏览器中显示，比如纯文本、HTML以及图片等类型。
若手动将链接另存，Chrome 22中文版弹出的保存框默认主文件名永远为“下载”，Firefox 16则是一串莫名其妙并以.part结尾的字符串做默认名。
对于浏览器不能显示的MIME类型，Chrome 22和Firefox 16都会自动调用下载功能。但是Chrome中文版下载的默认主文件名仍然总为“下载”，Firefox 16则还是莫名其妙的字符串。
不过，Chrome 22中已经对<a>元素增加了一个新的标签属性“download”来解决这个问题。
[html]
<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>
对于指定了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支持的<a>的标签属性download，我是从“zip.js”（一个开源的zip压缩解压JS库）的demo中发现的。实现此属性最早的Chrome版本未知。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的html5教程-Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用全部内容，希望文章能够帮你解决html5教程-Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。