Specifying blob encoding in Google Chrome
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","");
new Blob(["➀➁➂ Test"])
will generate a Blob representing that text encoded as UTF-8.
That browsers assumes text files should be read in ISO is a weird choice IMM.
Appending the { type: "text/plain;charset=utf8" }
should generate the proper Content-Type
header when they browsers will serve it through a blob URI. That Chrome doesn't with open()
sounds like a bug.
Now you can workaround this by prepending a BOM sequence at the beginning of your text file, so that Chrome detects it as UTF, even without Content-Type info:
var BOM = new Uint8Array([0xEF,0xBB,0xBF]);var b = new Blob([ BOM, "➀➁➂ Test" ]);var url = URL.createObjectURL(b);open(url);
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.