Specifying blob encoding in Google Chrome

Question

The following code (vendor normalized) works perfectly fine and displays "➀➁➂ Test" in Firefox 8, but displays "➀âžâž‚ Test" in Google Chrome. Is there any way to preserve encoding of blobs in Google Chrome short of writing a file to a temporary filesystem using the filesystem API?

var bb = new BlobBuilder;
bb.append("➀➁➂ Test");
var b = bb.getBlob("text/plain;charset=UTF-8");
var url = URL.createObjectURL(b);
open(url);

Answer 1

Gecko (Firefox), WebKit (Safari, Chrome) and Opera support the non-standard btoa function for encoding a string in base 64. In order to get a base 64 string containing a string encoded as UTF-8 you need to use the encodeURIComponent-unescape trick. encodeURIComponent encodes a string as UTF-8 URL but unescape decodes each %xx as a single character. btoa expects a binary string of whatever encoding you want.

var base64 = btoa(unescape(encodeURIComponent(data)));
window.open("data:text/plain;charset=UTF-8;base64,"+base64,"UTF-8 Text");

Of course this does not work in IE, but I think IE 10 will support the Blob-API. Who knows how it will handle encodings.

PS: IE seems not to be able to window.open data:-urls and would have a ridiculous small url length limitation anyway.

PPS: This works for me in Chrome:

var b = new Blob(["➀➁➂ Test"],{encoding:"UTF-8",type:"text/plain;charset=UTF-8"});
var url = URL.createObjectURL(b);
window.open(url,"_blank","");

Answer 2

The problem is the default page encoding for new tabs in Chrome. When the new window opens (after window.open(url)) choose View > Encoding > Unicode from the Chrome menu. This changed the displayed text from "➀âžâž‚ Test" to "➀➁➂ Test" for me in Chrome 13.

If you want a solution that will let you open blobs in new windows regardless of the default encoding, then you can rely on the fact that a document in an iframe will inherit the parent document encoding when it doesn't explicitly specify its own encoding. So you can open a window with a blank HTML document served with a Content-Type:text/html; charset=utf-8 header, then append an iframe to the body with the src attribute set to the blob URL.