将 HTML 转换为 base64 未正确编码某些字符答案

【问题标题】：Converting HTML to base64 is not encoding certain characters correctly将 HTML 转换为 base64 未正确编码某些字符
【发布时间】：2019-08-12 12:49:37
【问题描述】：

我正在尝试将 HTML 字符串转换为 base64，然后将其显示在 iframe 中，但我遇到了一些问题。当我将字符串编码为 base64 并将其视为数据 URI 时，它会将不间断空格显示为“Â”，而撇号和破折号等其他字符则显示为随机 ASCII 字符。

这就是我将字符串转换为 base64 的方式：

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

关于如何防止这种情况的任何想法？谢谢！

【问题讨论】：

但是你为什么要首先将 HTML 转换为 base64？
@JeremyThille 我需要能够在 iframe 中显示它
因此我的问题。您想在 iframe 中显示 HTML...为什么要将其转换为 base64？ iframe 旨在显示 HTML。对我来说听起来像是一个 XY 问题
@JeremyThille 也许我对 iframe 的工作原理感到困惑，但我将如何将一个大的 HTML 字符串放在一个中？我现在将其转换为 base64 数据 URI 并将其设置为 iframe 的源

标签： javascript html encoding base64

【解决方案1】：

没有理由去做你正在做的事情。数据 URI 几乎总是错误的选择。 Base-64 编码增加了 33% 的大小开销并浪费了 CPU。数据 URI 为 subjected to some strict size limits。

改用 Blob/Object URL。

iframe.src = URL.createBlobURL(blob);

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

至于您的 UTF-8 编码问题，问题可能出在您的文件本身，如果您不是从在标头中设置字符集的服务器提供服务，则它需要在文件中：

<meta charset="UTF-8">

这里没有服务器，所以需要在文件中声明。

【讨论】：