【Delphi】JavaScript 调用 Delphi 的 Base64 编码，汉字乱码解决方法

在用Delphi开发后台，对字符串进行Base64后，前端通过JavaScript解码是会出现如下问题（注意：只有Delphi编码，javascript解码会出现这个问题，如果解码也是Delphi就没有问题）：

1. 汉字乱码
2. 空格解码后变成 + 号

本文中使用的编码前样例数据为：深圳 ShenZhen 123

出现上述问题的Delphi代码如下：

S := TNetencoding.Base64.Encode(Str);

样例数据：

编码前	编码后
深圳 ShenZhen 123	5rex5ZyzIFNoZW5aaGVuIDEyMw==

javascript的解码代码如下（如果引用三方库解码，我没有测试，下面是原生解码）：

let decodedData = window.atob(JSONStr);

样例数据：

解码前	解码后（乱码）
5rex5ZyzIFNoZW5aaGVuIDEyMw==	æ·±å³ ShenZhen 123

解决汉字乱码问题，就是需要将字符串在Base64前先给其进行URL编码，然后在进行Base64编码，这样在javascript中也要进行相反的操作（先进行Base64解码，然后在进行URL解码），具体的代码如下：

Delphi代码：

  //首先进行URL编码
  S  := TNetEncoding.URL.Encode(Str);
  //进行Base64编码
  JSONStr := TNetencoding.Base64.Encode(S);

样例数据：

编码前	编码后
深圳 ShenZhen 123	JUU2JUI3JUIxJUU1JTlDJUIzK1NoZW5aaGVuKzEyMw==

javascript代码：

//Base64 解码
let decodedData = window.atob(JSONStr);
//URI解码
let decodedData1 = decodeURIComponent(decodedData);

样例数据：

解码前	解码后（无乱码）
JUU2JUI3JUIxJUU1JTlDJUIzK1NoZW5aaGVuKzEyMw==	深圳+ShenZhen+123

通过以上代码，汉字乱码的问题就不存在了，但是如果编码前的原字符串数据中有空格（本样例数据中汉字和字符间有空格，字符和数字间有空格），通过上述代码后，javascript解码后会将空格变成 + 号，这是不正确的。解决的办法是修正Delphi端的Base64编码方式。

Delphi 代码：

  //首先进行URL编码
  S  := TNetEncoding.URL.Encode(Str,[],[]);  //这里取消将空格不作为+号处理
  //进行Base64编码
  JSONStr := TNetencoding.Base64.Encode(S);

样例数据：

编码前	编码后
深圳 ShenZhen 123	JUU2JUI3JUIxJUU1JTlDJUIzJTIwU2hlblpoZW4lMjAxMjM=

javascript代码不用调整，就可以正确解码，空格也不会变成 + 号。

解码前	解码后
JUU2JUI3JUIxJUU1JTlDJUIzJTIwU2hlblpoZW4lMjAxMjM=	深圳 ShenZhen 123

本文是在开发项目中遇到的坑，希望对遇到这个坑的朋友有帮助！

演示程序含原代码下载​​​​​​​