非拉丁字符的 Base64 编码失败

Question

我正在开发一个 VueJS 项目，在该项目中我根据输入生成 SVG 图像。 生成它们之后，我将它们中的数据作为 base64 编码字符串发送到后端 API。

现在，每当我尝试使用 UTF8 字符对字符串进行编码时，都会收到以下错误：

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

我试图用它们的 Unicode 代码点替换 HTML 中的所有字符来解决这个问题。 但是，每当我尝试获取 DOM 元素时，Unicode 编码字符都会恢复为纯文本格式。

如何获取 HTML 作为 base64 编码字符串？

这个问题可以在这里看到。

我已经尝试过使用XMLSerializer和运行innerHTML.toString() ：

let svgEl = this.$el.querySelector('.svg-container svg')
if (!svgEl) {
  console.log('no poster element')
  return
}

// Using XMLSerializer:
console.log(btoa(new XMLSerializer().serializeToString(posterEl))

// Using innerHTML:
console.log(btoa(posterEl.innerHTML.toString()))

上述两个示例都产生相同的错误。

谢谢。

Answer 1

您可以按照此已回答问题的回答步骤操作： 无法在“Window”上执行“btoa”：要编码的字符串包含 Latin1 范围之外的字符。

解决方案的关键是通过这种方式对字符串进行编码：

btoa(unescape(encodeURIComponent(str)));