svg转base64时遇到【无法在“Window”上执行“btoa”：要编码的字符串包含超出 Latin1 范围的字符】问题

今天在做svg预览时遇到了一个报错

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

意思是：无法在“Window”上执行“btoa”：要编码的字符串包含超出 Latin1 范围的字符

查了很多博客都没有很好的解决，所以写这篇博客记录一下我最终的解决方式。

背景

原本我直接使用以下代码就行转化，在普通的小icon的svg预览功能上是没有任何问题的。

const svgToBase64 = (svgContent: any) => {
    return `data:image/svg+xml;base64,${btoa(svgContent)}`;
}

但是当我需要把比较复杂的svg进行转换时，就会出现上面说的报错。

解决方案

我首先使用 TextEncoder 类将 SVG 内容编码为 UTF-8 字节数组，然后将字节数组转换为一个二进制字符串，最后使用 btoa 将其转换为 base64 字符串，避免因为字符集不匹配而导致的问题，因为 TextEncoder 和 Uint8Array 能够正确处理 Unicode 字符。然后再加上try。。catch错误处理，避免一个svg的转换失败影响其他svg。

// svg转base64（兼容超出 Latin1 范围的字符情况，并做错误处理&#x