使用 Angular 做档案编码检测 (detect-encoding)

来由

前一阵子，後端有个需求是在档案上传前，需要提前知道上传的档案编码是 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