Angular项目中使用NgxCsvParser导入CSV文件时特殊字符显示异常问题

我来帮你搞定这个德语特殊字符显示异常的问题！你遇到的情况大概率是CSV文件编码和解析器默认编码不匹配导致的——虽然字体支持ä这类字符，但解析时编码识别错误会让它们变成方块。下面是具体的解决步骤：

1. 先确认CSV文件的实际编码 #

首先得搞清楚你的CSV文件本身用的是什么编码：

• 用记事本打开CSV文件，点击「文件」→「另存为」，看右下角的编码选项。如果显示是ANSI或者ISO-8859-1（德语场景常用编码），记下来这个编码类型。
• 如果是Excel导出的CSV，导出时别选默认的格式，要选「CSV (逗号分隔)(*.csv)」，并且在弹出的对话框里选择「UTF-8」编码，避免默认的ANSI编码坑。

2. 修改NgxCsvParser的解析配置，指定正确编码 #

NgxCsvParser的parse方法支持在配置参数里指定文件编码，你只需要在现有配置里加上encoding属性就行：

修改后的TypeScript代码 #

uploadListener($event: any): void {
  let text = [];
  let files = $event.srcElement.files;
  if (this.isValidCSVFile(files[0])) {
    // 根据你的CSV实际编码替换这里的值，比如ISO-8859-1或utf-8
    this.ngxCsvParser.parse(files[0], { 
      header: false, 
      delimiter: ',',
      encoding: 'ISO-8859-1' 
    })
      .pipe().subscribe((result: Array<any>) => {
        result.forEach(element => {
          let tempObject = { "id": element[0], "textToTranslate": element[1] }
          this.records.push(tempObject);
        });
        this.records.shift();
        console.log(this.records);
      }, (error) => {
        console.log('Error', error);
      });
  } else {
    alert("Please import valid .csv file.");
    this.fileReset();
  }
}

3. 备选方案：手动读取文件并指定编码 #

如果上面的方法没生效，你可以先用FileReader手动读取文件内容并指定编码，再传给NgxCsvParser的parseText方法解析：

备选代码实现 #

uploadListener($event: any): void {
  let files = $event.srcElement.files;
  if (this.isValidCSVFile(files[0])) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const csvContent = e.target?.result as string;
      this.ngxCsvParser.parseText(csvContent, {
        header: false,
        delimiter: ','
      }).pipe().subscribe((result: Array<any>) => {
        result.forEach(element => {
          let tempObject = { "id": element[0], "textToTranslate": element[1] }
          this.records.push(tempObject);
        });
        this.records.shift();
        console.log(this.records);
      }, (error) => {
        console.log('Error', error);
      });
    };
    // 这里指定CSV文件的实际编码，比如ISO-8859-1
    reader.readAsText(files[0], 'ISO-8859-1');
  } else {
    alert("Please import valid .csv file.");
    this.fileReset();
  }
}

原理说明 #

浏览器默认读取文件时可能会用系统默认编码（比如Windows的GBK/ANSI），而德语特殊字符只有在ISO-8859-1或UTF-8编码下才能被正确解析。通过手动指定编码，就能让解析器准确识别这些特殊字符，避免显示成方块。

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