來由

前一陣子，後端有個需求是在檔案上傳前，需要提前知道上傳的檔案編碼 是 UTF-8 或是 ascii 等，才能決定要不要將檔案放進資料庫，或是在這之前再做一次轉檔。

今天的內容跟 Angular 比較沒有關係，屬於套件分享，但因也是使用 Angular 實作，所以也就放進來了。

實作

npm i jschardet

template

<div class="form-group">
  <label for="file">Choose File</label>
  <input type="file" id="file" (change)="fileChange($event)" />
</div>

<br />
Your Encoding：{{ encoding$ | async }}

.ts 檔

import { Component, VERSION } from "@angular/core";
import jschardet from "jschardet";
import { Subject } from "rxjs";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  fileToUpload: File = null;
  encoding$ = new Subject();

  fileChange(event: any): void {
    const file = event.target.files[0];

    const reader = new FileReader();
    reader.onload = (e: any) => {
      const csvResult = e.target.result.split(/\r|\n|\r\n/);
      const encoding = jschardet.detect(csvResult.toString()).encoding;

      this.encoding$.next(encoding);
    };
    reader.readAsBinaryString(file);
  }
}

範例：
https://stackblitz.com/edit/angular-detect-encoding

參考資料：
csv-encoding-detection-javascript

附錄

後來使用 node 寫成小工具

git：https://github.com/mtwmt/detect-encoding