Mandy's Web

文章導覽

  • 來由

  • 實作

  • 附錄


使用 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


附錄

後來使用 node 寫成小工具

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


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular