如何在Angular 8中检测文件的字符集？

Question

我想知道如何在使用FileReader Web API读取文件之前检测文件的字符集。在使用fileReader.readAsText(file, "UTF-8")读取文件字符集之前，我需要知道文件字符集是什么，其中“ UTF-8”目前尚不知道。

是否可以使用Angular或任何手动Vanilla方法检测字符集而无需查看签名或使用BOM表代码的任何npm软件包（我PC上保存在ISO-8859-1或UTF-8中的文件具有相同的签名，但没有BOM表代码。

到目前为止，我尝试使用的软件包是'encoding'，'chardet'和'encoding-japanese'。它们不适用于Angular 8，因为它们是与Node一起使用的。

背景故事：我有一个CSV文件，一旦它保存在Excel中，它就会以ISO-8859-1的编码保存，而且我不能指望我的所有客户都使用特定的编码（不懂技术的人）保存他们的文件。但是，其他客户端可能会使用Notepad ++，它将这些文件保存在UTF-8中。我需要一种方法来确定用于停止出现诸如“。”之类的字符的编码。

Answer 1

您可能需要使用detect-character-encoding，它是一个外部npm模块，它将像这样为您完成工作。

const fs = require('fs');
const detectCharacterEncoding = require('detect-character-encoding');

const fileBuffer = fs.readFileSync('file.txt');
const charsetMatch = detectCharacterEncoding(fileBuffer);

console.log(charsetMatch);
// {
//   encoding: 'UTF-8',
//   confidence: 60
// }

Answer 2

您可以在Angular应用中使用encoding-japanese包。尝试以下操作

将软件包添加到package.json并运行npm install

{
  "dependencies": {
    ...,
    "encoding-japanese": "^1.0.30",
  }
}

在应用程序中使用程序包。

控制器

import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs';

declare const require: any;
export const Encoding = require('encoding-japanese');

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  encoding: string;

  constructor() { }

  onUpload(event: any) {
    this.detectEncoding(event.currentTarget.files[0]).subscribe(
      encoding => {
        console.log('File encoding is: ' + encoding);
        this.encoding = encoding;
      }
    );
  }

  private detectEncoding(file): Observable<string> {
    let result = new Subject<string>();

    const reader = new FileReader();
    reader.onload = (e) => {
      const codes = new Uint8Array(e.target.result as ArrayBuffer);
      const detectedEncoding = Encoding.detect(codes);
      result.next(detectedEncoding);
    };
    reader.readAsArrayBuffer(file);

    return result.asObservable();
  }
}

模板
<input type="file" (change)="onUpload($event)"/>
<ng-container *ngIf="encoding">
  <p>File encoding is: {{ encoding }}</p>
</ng-container>

编码检测机制源自encoding-japanese示例here。
然后您可以验证订阅中的编码

this.detectEncoding(event.currentTarget.files[0]).subscribe(
  encoding => {
    if (encoding === 'UTF8') {
      // encoding is UTF-8
    } else {
      // encoding isn't UTF-8
    }
  }
);

您可以检查以下编码字符串。
UTF32
UTF16
UTF16BE
UTF16LE
BINARY
ASCII
JIS
UTF8
EUCJP
SJIS
UNICODE

工作示例：Stackblitz