react-papaparseでshift-jisのCSVを読み込む

2024年3月4日

react-papaparseでshift-jisのCSVを読み込むと次のように日本語が文字化けしてしまします。

'�˗��ԍ�', '�⍇���ԍ�', '���Ǝ�ID', '�T�
'10000000000000053035', '', '10028', '0001', '382647',

日本語が文字化けせず読み込ませる方法を紹介します。

解決方法：configでencodingを指定する

react-papaparseでエンコーディングする方法は、CSVReaderのconfigでencoding: "Shift-JIS"を指定するとshift-jisのCSVでも文字化けしずに読み込むことができます。

import {
  useCSVReader,
  lightenDarkenColor,
  formatFileSize,
  usePapaParse,
} from "react-papaparse";

<CSVReader
  config={{
    encoding: "Shift-JIS",
  }}
  onUploadAccepted={(results: any) => {
    console.log("---------------------------");
    console.log(results);
    console.log("---------------------------");
    setZoneHover(false);
  }}
  onDragOver={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(true);
  }}
  onDragLeave={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(false);
  }}
>
...
</CSVReader>

configのデフォルト値はこの様になっています。

{
  delimiter: "",  // auto-detect
  newline: "",  // auto-detect
  quoteChar: '"',
  escapeChar: '"',
  header: false,
  transformHeader: undefined,
  dynamicTyping: false,
  preview: 0,
  encoding: "",
  worker: false,
  comments: false,
  step: undefined,
  complete: undefined,
  error: undefined,
  download: false,
  downloadRequestHeaders: undefined,
  skipEmptyLines: false,
  chunk: undefined,
  fastMode: undefined,
  beforeFirstChunk: undefined,
  withCredentials: undefined,
  transform: undefined,
  delimitersToGuess: [',', '	', '|', ';', RECORD_SEP, UNIT_SEP]
}