Angular 4从URL读取CSV出现乱码，如何解码为正常字符串？

你碰到的这种乱码情况，几乎可以肯定是因为CSV文件的编码不是FileReader.readAsText默认使用的UTF-8，强行用UTF-8解码非UTF-8编码的文件，就会出现这类无法识别的字符。下面给你两种可行的解决办法：

方法一：直接指定解码编码 #

readAsText方法支持第二个参数，用来指定文件的编码格式。你只需要先确认CSV文件实际使用的编码（比如用记事本打开CSV，点击「另存为」就能看到当前编码），然后把编码值传进去就行。

修改后的代码示例：

this.http.get(url, { responseType: ResponseContentType.Blob })
  .map(r => r.blob())
  .subscribe( (response) => {
    let reader = new FileReader();
    reader.addEventListener("load", () => {
      console.log(reader.result);
    }, false);
    // 替换成你的CSV实际编码，比如GBK、GB2312、Big5等
    reader.readAsText(response, 'GBK');
  }, (err) => {
    console.log(err);
  })

方法二：使用编码转换库（可选） #

如果不确定文件编码，或者需要处理多种编码场景，可以引入iconv-lite这类编码转换库。步骤如下：

1. 安装依赖：npm install iconv-lite --save
2. 在组件中引入并使用：

import * as iconv from 'iconv-lite';

// ... 其他代码
this.http.get(url, { responseType: ResponseContentType.ArrayBuffer })
  .map(r => new Uint8Array(r))
  .subscribe( (buffer) => {
    // 这里指定源编码和目标编码
    const csvText = iconv.decode(buffer, 'GBK');
    console.log(csvText);
  }, (err) => {
    console.log(err);
  })

这种方式更灵活，能处理更多编码类型，但需要额外引入库，你可以根据自己的需求选择。

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