Angular 4导出Base64编码字符串到文件时出现乱码问题求助

我来帮你搞定这个乱码问题！先看一下你的Base64字符串data:text/plain;base64,SEkNCndlbGNvbWUgdG8gQW5ndWxhciEh，其实它解码后是完全正确的内容：

HI
welcome to Angular!!

出现乱码的核心原因是写入文件时编码格式不匹配，或者处理Base64的流程有误。下面给你一步步的解决方案：

1. 正确处理Base64字符串（剥离前缀+解码） #

首先要把data:text/plain;base64,这个前缀去掉，只保留纯Base64编码部分，再用正确的方式解码：

// 你的原始Base64 URI
const base64Uri = 'data:text/plain;base64,SEkNCndlbGNvbWUgdG8gQW5ndWxhciEh';
// 拆分出纯Base64编码内容
const pureBase64 = base64Uri.split(',')[1];
// 解码Base64为字符串
const decodedText = window.atob(pureBase64);

2. 用UTF-8编码创建Blob并写入文件 #

直接把解码后的字符串传入Blob可能会因为浏览器默认编码问题导致乱码，建议先转成Uint8Array，再明确指定UTF-8编码创建Blob：

// 将解码后的字符串转换为Uint8Array
const uint8Array = new Uint8Array(decodedText.length);
for (let i = 0; i < decodedText.length; i++) {
  uint8Array[i] = decodedText.charCodeAt(i);
}

// 创建指定UTF-8编码的Blob
const blob = new Blob([uint8Array], { type: 'text/plain;charset=utf-8' });

// 触发文件下载（Angular中可以用这种方式实现）
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = 'result.txt'; // 自定义文件名
document.body.appendChild(link);
link.click();

// 清理资源
window.URL.revokeObjectURL(downloadUrl);
document.body.removeChild(link);

3. 检查你的Base64生成代码（确保源头正确） #

顺便确认下你的Base64生成逻辑是否正确，正确的生成方式应该是这样的（和你提供的编码结果一致）：

const originalContent = 'HI\nwelcome to Angular!!';
// 用TextEncoder转成Uint8Array，保证UTF-8编码
const encoder = new TextEncoder();
const encodedArray = encoder.encode(originalContent);
// 转成Base64字符串
const base64Str = btoa(String.fromCharCode(...encodedArray));
// 加上data URI前缀就是你提供的字符串
const dataUri = `data:text/plain;base64,${base64Str}`;

这样处理后，写入文件的内容就会和你期望的HI\nwelcome to Angular!!完全一致，不会出现乱码了。

内容的提问来源于stack exchange，提问作者Santhosh