Vue.js中JSON文件处理后出现无效字符的问题排查与解决

首先明确一点：JSON.parse() 和 JSON.stringify() 本身不会修改JSON的编码或破坏结构——只要你传入的是合法的JSON字符串，这两个操作是完全可逆的，它们处理的是JavaScript内存中的字符串和对象，核心问题出在文件读取和下载的编码一致性上。

从你的描述来看，特殊字符（如\u2013、\u00e7）变为乱码，导致JSON无效，主要是这两个环节出了问题：

一、文件读取环节：确保FileReader用正确编码解析原文件 #

FileReader.readAsText() 默认使用UTF-8编码读取文件，但如果你的原JSON文件不是UTF-8编码（比如带BOM的UTF-8、UTF-16，或者GBK等），就会导致字符解析错误，后续的JSON.parse()虽然能成功，但内存中的对象已经包含了错误的字符，最终JSON.stringify()输出自然会乱码。

解决方法：

• 显式指定读取编码为UTF-8（即使是默认值，显式指定能避免浏览器的隐式编码猜测）：

  reader.readAsText(this.file, 'utf-8');
  

• 先验证读取结果：在reader.onload中打印event.target.result，对比原文件内容。如果这里已经出现乱码，说明原文件的实际编码不是UTF-8，需要调整读取时的编码参数（比如原文件是UTF-16就传'utf-16'）。

二、文件下载环节：强制以UTF-8编码生成下载文件 #

当你用JSON.stringify()得到JSON字符串后，生成Blob时必须明确指定编码，否则浏览器可能会用系统默认编码保存文件，导致特殊字符乱码。

正确的下载代码示例：

// 假设this.json是你处理后的对象
const jsonString = JSON.stringify(this.json, null, 2); // 第三个参数是格式化缩进，可选
const blob = new Blob([jsonString], {
  type: 'application/json;charset=utf-8' // 关键：指定MIME类型和UTF-8编码
});

// 创建下载链接
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.json';
downloadLink.click();
URL.revokeObjectURL(downloadLink.href); // 释放内存

这里的核心是Blob的type参数必须包含charset=utf-8，确保浏览器以UTF-8编码写入文件。

三、解决Python读取时的UnicodeDecodeError #

Python的open()函数默认编码依赖系统环境（比如Windows是GBK），所以即使文件是UTF-8编码，用默认方式打开也会报错。解决方法是显式指定UTF-8编码：

with open('output.json', 'r', encoding='utf-8') as json_file:
    data = json.load(json_file)

总结 #

整个流程的关键是保持编码一致性：

1. 读取文件时，用和原文件匹配的编码（优先UTF-8）解析；
2. 生成下载文件时，强制用UTF-8编码输出；
3. 后续读取文件（如Python）时，同样指定UTF-8编码。

只要做到这几点，上传→下载（甚至编辑）的流程就能保证JSON的有效性和字符完整性。

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