Use HTML5 in chrome to implement local applications with the "edit" and "Download" functions of Files

[Data URL]

In the latest HTML5 browser, Data URL (rfc2397) can be used to reference "external" resources.

For example, after clicking the link below in the HTML5 browser, it will go to a new page with "Hello Data URL!" displayed !" .

<a href="data:text/plain,Hello Data URL!">Hello</a>

What if the text content contains special characters? Data URL is also a URL. You can also use the common URL escape code:

<a href="data:text/html;charset=utf8,%3Ch1%3E%E4%BD%A0%E5%A5%BD%3C/h1%3E">URL escaped</a>

The above examples are plain text data. In fact, data URL can also represent binary data, which can be encoded with base64 (of course, URL escape can also be implemented ).

The following is a Data URL indicating the GIF image (referenced from rfc2397 ):

<a href="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7">Larry</a>

Not all binary file formats must be encoded. When the actual data does not contain special characters, it is also possible to skip encoding:

<a href="data:application/octet-stream,12345">octet-stream</a>

You can right-click the link above and choose "Save as" to save the local disk file. This process is like downloading a remote file.

In this way, in theory, we can convert any data into a Data URL link to allow users to "Download ".

[Automatic download and default file name]
The above function has been implemented to generate file data and save it locally, but there are still shortcomings:

For MIME types that the browser can display, click the link to display them directly in the browser, such as plain text, HTML, and images.

If you manually Save the link, the saved box in chrome 22 will pop up by default. The main file name will always be "downloaded", and Firefox 16 will be a string of inexplicable and. the string ending with the part is the default name.

For MIME types that cannot be displayed by the browser, chrome 22 and Firefox 16 automatically call the download function. However, the default main file name for chrome Chinese Version Download is still "Download", while Firefox 16 is still an inexplicable string.

However, a new tag attribute "Download" has been added to the <A> element in chrome 22 to solve this problem.

<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>

For links with the download tag attribute specified, chrome always performs the download operation after clicking, and the default file name to be downloaded and saved is the download attribute value.

Unfortunately, Firefox 16 does not support this attribute.

In addition, by default, chrome downloads do not prompt the file storage location and name. If you want to prompt every time, you can modify it in chrome settings.

[Appendix]

To achieve this feature in a browser, you can use the document.exe ccommand ('saveas') of ieto simulate it, but you cannot process complicated data formats.

You can also use the server program to process complex data, but the processing process is also complicated. A pure local application must also build an additional server.

The next step is to use HTA + FSO/ADO. stream is used to generate files, but the unified and perfect general dialog box controls are not used in various generations of Windows systems to implement the "Save as" dialog box, or register separately, or use the dialog box components in office, or simulate the implementation in other ways. As a result, the non-core function makes the entire implementation much more complicated.

For more complex data, the data URL may not be enough. In this case, you can consider the more powerful HTML5 file API and use the createobjecturl () method to obtain a URL shorter than the Data URL, we will not describe it here.

I found the <A> label attribute download supported by Chrome 22 in the demo of "Zip. js" (an open-source zip compression and decompression JS library. The earliest chrome version of this attribute is unknown.