CODEWITHSUNDEEP
javascripthtmlencodingbase64
david moeller
david moeller

Reputation: 365

Converting HTML to base64 is not encoding certain characters correctly

I am trying to convert an HTML string to base64 which I will then display in an iframe but I am running into some issues. When I encode the string as base64 and view it as a data URI, it is display non-breaking spaces as 'Â', and other characters such as apostrophes and dashes are displayed as random ASCII characters.

This is how I am converting the string to base64:

var blob = new Blob([message], {
    type: contentType
});
var reader = new FileReader();
reader.onload = function (e) {
     let result = e.target.result;
};
reader.readAsDataURL(blob);

Any ideas on how to prevent this? Thanks!

Upvotes: 0

Views: 521

Answers (1)

Brad
Brad

Reputation: 163232

There is no reason to do what you're doing. Data URIs are almost always the wrong choice. Base-64 encoding adds 33% overhead of size and wastes CPU. Data URIs are subjected to some strict size limits.

Use a Blob/Object URL instead.

iframe.src = URL.createBlobURL(blob);

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

As to your UTF-8 encoding problem, the issue is likely in your file itself, in that if you're not serving from a server which sets the character set in the headers, it needs to be in the file:

<meta charset="UTF-8">

There's no server here, so you need to declare it in the file.

Upvotes: 3

Related Questions